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