ReactNative 获取UI对象引用

开发语言
2017-06-13 20:44:11
分享

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属性可以得到组件实例的引用。
The End
免责声明:本文系转载,版权归原作者所有;旨在传递信息,不代表本站观点和立场。