react native的ref使用例子

发布时间：2020-12-15 06:28:56 所属栏目：百科来源：网络整理

导读：/** * Create by bamboo on 2018-04-17 * ref例子 */ import React ,{ Component } from 'react' ; import { StyleSheet , View , Text , TouchableOpacity } from 'react-native' ; export default class RefTest extends Component { constructor ( props

 
   /** 
  
 
    * Create by bamboo on 2018-04-17 
  
 
    * ref例子 
  
 
    */ 
  
 
   import 
   React,{ 
   Component} 
   from 
   'react'; 
  
 
   import { 
   StyleSheet,View,Text,TouchableOpacity} 
   from 
   'react-native'; 
  

 
   export 
   default 
   class 
   RefTest 
   extends 
   Component { 
  
 
   constructor( 
   props) { 
  
 
   super( 
   props); 
  
 
   this. 
   _button = 
   null; 
   //按钮 
  

    } 
  
 
   render() { 
  
 
   return ( 
  
 
   < 
   View 
   > 
  
 
   < 
   TouchableOpacity 
   style= 
   {[{ 
   width: 
   100,height: 
   30,backgroundColor: 
   '#ff3',
 
   borderRadius: 
   15,alignItems: 
   'center',justifyContent: 
   'center',}] 
   } 
  
 
   onPress= 
   {this. 
   _onButtonPress. 
   bind( 
   this) 
   } 
  
 
   ref= 
   { 
   button 
   => 
   this. 
   _button = 
   button 
   } 
   > 
  
 
   < 
   Text 
   >Ref 测试 
   </ 
   Text 
   > 
  
 
   </ 
   TouchableOpacity 
   > 
  
 
   < 
   View 
   > 
  
 
   < 
   Text 
   ref= 
   "textId" 
   >我是Text 
   </ 
   Text 
   > 
  
 
   </ 
   View 
   > 
  
 
   </ 
   View 
   > 
  

    ); 
  

    } 
  

 
   _onButtonPress = () 
   =>{ 
  
 
   if ( 
   this. 
   _button && 
   this. 
   _button. 
   measure) { 
  
 
   this. 
   _button. 
   measure(( 
   fx,fy,width,height,px,py) 
   => { 
  
 
   console. 
   log( 
   "fx="+ 
   fx + 
   "|fy="+ 
   fy+ 
   "|width="+ 
   width+ 
   "|height="+ 
   height + 
   "|px="+ 
   px + 
   "|py=" + 
   py); 
  

    }); 
  

    } 
  
 
   this. 
   refs. 
   textId. 
   setNativeProps({ 
  
 
   style:{ 
  
 
   color: 
   'blue',
 
   fontSize: 
   30 
  

    } 
  

    }); 
  

    } 
  

    } 
  

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!