react-native 之 ref 的使用

最新推荐文章于 2024-01-20 00:19:43 发布

reylen

最新推荐文章于 2024-01-20 00:19:43 发布

阅读量5.4k

点赞数 1

分类专栏： react-native 文章标签： react-native

本文链接：https://blog.youkuaiyun.com/reylen/article/details/73920310

版权

react-native 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在React Native中利用Refs获取组件实例并修改样式及触发组件方法，提供了具体示例，包括设置组件样式和刷新WebView组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点内容在react-native中可以通过 ref属性来获取组件，并设置组件的属性及其方法，实例如下

class TestRef extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this.changeStyle = this.changeStyle.bind(this);

    }
    render(){
        return(
            <View style={{height:50,width:200,backgroundColor:'orange'}} ref='ref_test' >
                <Text ref={(e)=>{this._myText = e;}} onPress={this.changeStyle}>change style</Text>
            </View>
        )
    }
    changeStyle(){
        this.refs.ref_test.setNativeProps({
            style:{
                backgroundColor:'red',width:200,height:100
            }
        });

        this._myText.setNativeProps({
            style:{
                color:'yellow',
            }
        });
    }
}

需要注意点的是

        this.changeStyle = this.changeStyle.bind(this);

这个点击的方法需要绑定，如果去掉了,则会报错！经过实验发现，在方法中使用了 this 调用类方法属性的时候，那么这个方法必须绑定了this才可以了，否则方法里面不认识 this

上面演示了设置属性的，还可以执行组件的方法，如果是WebView组件，就可以这样操作

<WebView ref="webView"/>

this.refs.webView.reload();

执行其刷新操作。