react-native 之 ref 的使用

前端之家收集整理的这篇文章主要介绍了react-native 之 ref 的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

重点内容在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',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();

执行其刷新操作。

猜你在找的React相关文章