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属性可以得到组件实例的引用。

来源: 雨林博客(www.yl-blog.com)