ReactNative开发——组件的引用

ReactNative开发——组件的引用

定义组件的引用

<TextInput ref='aReferName'
...

使用组件

根据引用调用组件的方法

this.refs.aReferName.公开函数()

示例

render() { return ( <View style={{flex: 1,justifyContent: 'flex-start'}}> <TextInput  ref='et' //设置该组件的引用为 et style={styles.textInputStyle} /> <TextInput style={{height: 80,margin: 10}} /> {/*通过组件的引用，调用组件的公开成员函数*/} <Button title="点击让第一个TextInput获取焦点" onPress={() => this.refs.et.focus()}/> </View> ); }

上面代码实现了：点击按钮，让第一个TextInput组件获取焦点的效果。

获取组件的位置信息

每个ReactNative组件都已个measure成员函数，用来获取组件的位置信息。
示例：

export default class Project07 extends Component {

    componentDidMount() {
        // window.setTimeout(this.tempFunc.bind(this),1);
        // 使用箭头函数可以绑定this
        window.setTimeout(() => {
            this.refs.et.measure(this.getTextInputPosition)
        },1)

    }

   /** * 组件的位置信息回调 * */
    getTextInputPosition(fx,fy,width,height,px,py) {
        console.log('Component width is ' + width);
        console.log('Component height is ' + height);
        console.log('X offset to frame: ' + fx);
        console.log('Y offset to frame: ' + fy);
        console.log('X offset to page: ' + px);
        console.log('Y offset to page: ' + py);
    }

    tempFunc() {
        this.refs.et.measure(this.getTextInputPosition)
    }

    render() {
        return (
            <View style={{flex: 1,justifyContent: 'flex-start'}}> <TextInput  ref='et' //设置该组件的引用为 et style={styles.textInputStyle} /> <TextInput style={{height: 80,margin: 10}} /> {/*通过组件的引用，调用组件的公开成员函数*/} <Button title="点击让第一个TextInput获取焦点" onPress={() => this.refs.et.focus()}/> </View> ); } }