之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用拿到组件，修改组件的属性。
定义组件的引用
通过在JSX代码中加入 ref="某个字符串",就可以定义一个组件的引用名称,如:
<TextInput ref="textInputRefer"...
/>
复制代码通过 this.refs.textInputRefer就可以得到这个组件的引用。 还可以调用组件里的公开函数:
this.refs.aReferName.公开成员函数名()
复制代码重新设定组件的属性
每一个React Native 组件都有一个公开的成员函数setNativeProps，它可以增加或者修改React Native组件的属性。
但是不建议使用setNativeProps函数，就因为它太简单粗暴了，它可以直接操作任何层面的组件属性，而不是使用React Native组件的状态机变量，这样会使代码逻辑混乱，可能打乱原来设计编写好的业务逻辑。 在使用之前还是先尝试使用setState和shouldComponentUpdate方法来解决问题。
在不得不频繁刷新，同时避免渲染组件结构和同步太多的视图变化带来的大量开销时，才考虑使用setNativeProps函数。
示例代码：
...
class AwesomeProject extends Component {// 构造constructor(props) {super(props);// 初始状态this.state = {textInputValue: ''};this.buttonPressed = this.buttonPressed.bind(this);}buttonPressed() { //当按钮按下的时候执行此函数let textInputValue = 'new value';this.setState({textInputValue});//修改文本输入框的属性值this.refs.textInputRefer.setNativeProps({editable:false});this.refs.text2.setNativeProps({style:{color:'blue',fontSize:30}});//使文本输入框变为不可编辑}render() {return (//ref={'text2'}> //指定本组件的引用名<View style={styles.container}><Text style={styles.buttonStyle}onPress={this.buttonPressed}>按我</Text><Text style={styles.textPromptStyle}ref="text2">文字提示</Text><View><TextInput style={styles.textInputStyle}ref="textInputRefer"value={this.state.textInputValue}onChangeText={(textInputValue)=>this.setState({textInputValue})}/></View></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center'},buttonStyle: { //文本组件样式,定义简单的按钮fontSize: 20,backgroundColor: 'grey'},textPromptStyle: { //文本组件样式fontSize: 20},textInputStyle: { //文本输入组件样式width: 150,height: 50,fontSize: 20,backgroundColor: 'grey'}
});...复制代码当按钮点击的时候就会修改属性，让TextInput组件不能再编辑，让字体变大,这个操作最好通过setState完成, 上面的做法只是为了给大家演示如何修改属性。
测量控件measure
使用View组件的onLayout回调函数是获取组件的宽，高与位置信息的最好办法，但是有时候组件是代码生成的，只能使用组件的measure成员函数测量控件了，这时候就需要根据组件的引用去调用组件的measure函数
下面代码不是通过代码生成的组件，主要是为了演示通过组件的引用调用measure函数。
...
class AwesomeProject extends Component {// 构造constructor(props) {super(props);// 初始状态this.state = {};this.tempfunc = this.tempfunc.bind(this);this.getPosition = this.getPosition.bind(this);}componentDidMount() {// this.tempfunc();//在componentDidMount执行完后才可以获取位置,不能直接调用tempfunc函数var aref = this.tempfunc;//这个位置保险起见延迟1毫秒,其实把数字改成0默认也在componentDidMount之后执行window.setTimeout(aref, 1);//延迟一毫秒执行tempfuc}tempfunc() {//测量 获取位置, 参数是回调方法this.refs.textInputRefer.measure(this.getPosition)}getPosition(fx, fy, width, height, px, py) {console.log('getPosition');console.log("width:" + width); //控件宽console.log("height:" + height);//控件高console.log("fx:" + fx); //距离父控件左端 x的偏移量console.log("fy:" + fy); //距离父控件上端 y的偏移量console.log("px:" + px); //距离屏幕左端 x的偏移量console.log("py:" + py); //距离屏幕上端 y的偏移量}render() {return (// 为了保重TextInput组件居中显示多用一个View包裹<View style={styles.container}><View style={{borderWidth:1}}><TextInput style={styles.textInputStyle}ref="textInputRefer"value={this.state.textInputValue}onChangeText={(textInputValue)=>this.setState({textInputValue})}/></View></View>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center'},textInputStyle: { //文本输入组件样式width: 200,height: 55,fontSize: 50,alignItems: 'center',justifyContent: 'center',paddingTop: 0,paddingBottom: 0,backgroundColor: "blue"}
});
...
复制代码更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。