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>
        );
    }
}