ReactNative 获取UI对象引用
ReactNative 获取UI对象引用。
虚拟Dom技术来说,既然是Dom必然我们可以通过某种途径来的大dom节点对象。
在ReactNative 中的每个界面都会有一个对象的引用,在官方文档案例中没有此案例。也是在做一些交互的时候才会遇到的问题。
例如:ListView 的滚动问题,你想通过添加一条数据自动跳转到最后一条数据,按照官方的案例来做,这可能是一个噩梦。因为没有提供详细的文档解释如何得到ListView引用。
来,这里举个例子,获取TextInput对象
<TextInput
ref={(component) => {
this._textInput = component;
}}
></TextInput>
这里通过ref属性,传递一个回调函数可以将TextInput组件的引用赋值到当前组件的属性里。
那么我们接下来可以这么操作:
......
_onSendMessage(that){
that._textInput.clear();
}
render() {
return (
<View>
<TextInput
ref={(component) => {
this._textInput = component;
}} ></TextInput>
<Button onPress={()=>
this._onSendMessage(this)
}
style={styles.sendButton}
title="清除内容"
>
</Button>
</View>
)
}
......
点击清除内容按钮,就能通过_onSendMessage函数来清除输入框中的内容。
总结:ref属性是ReactNative每个组件都有的,通过ref属性可以得到组件实例的引用。