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