react-native 之 ref 的使用-蒲公英云

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 ref=
      “ref_test”
      style=
      “{ {height:50,width:200,backgroundColor:’orange’}}”
      >
     

                      
      <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’
      ,
     

}

});

}

}

需要注意点的是

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

这个点击的方法需要绑定，如果去掉了,则会报错！

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

1	`<webview ref=` `“webView”` `></webview>`

1	`this` `.refs.webView.reload();`

执行其刷新操作。

react-native 之 ref 的使用