React Native-组件的引用

之前文章中，我们使用了许多React Native组件，也定义了一些组件。但是我们都没有定义组件的标识，我们都是通过回调方法处理组件对应的事件，这种情况能满足绝大多数需求，有些情况我们需要对组件进行操作，此时就需要获取组件的引用，进而通过该应用对组件进行操作。比如，我们可以通过引用拿到组件，修改组件的属性。

定义组件的引用

通过在JSX代码中加入 ref=”某个字符串”,就可以定义一个组件的引用名称,如:

<TextInput ref="textInputRefer"
    ...
/>

通过 this.refs.textInputRefer就可以得到这个组件的引用。

还可以调用组件里的公开函数:

this.refs.aReferName.公开成员函数名()

重新设定组件的属性

每一个React Native 组件都有一个公开的成员函数setNativeProps，它可以增加或者修改React Native组件的属性。

但是不建议使用setNativeProps函数，就因为它太简单粗暴了，它可以直接操作任何层面的组件属性，而不是使用React Native组件的状态机变量，这样会使代码逻辑混乱，可能打乱原来设计编写好的业务逻辑。

在使用之前还是先尝试使用setState和shouldComponentUpdate方法来解决问题。

在不得不频繁刷新，同时避免渲染组件结构和同步太多的视图变化带来的大量开销时，才考虑使用setNativeProps函数。

示例代码：

...
class AwesomeProject extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            textInputValue: ''
        };
        this.buttonPressed = this.buttonPressed.bind(this);
    }

    buttonPressed() { //当按钮按下的时候执行此函数
        let textInputValue = 'new value';
        this.setState({textInputValue});
        //修改文本输入框的属性值
        this.refs.textInputRefer.setNativeProps({
            editable:false
        });
        this.refs.text2.setNativeProps({
            style:{
                color:'blue',
                fontSize:30
            }
        });
        //使文本输入框变为不可编辑
    }

    render() {
        return (
            //ref={'text2'}>   //指定本组件的引用名
            <View style={styles.container}>
                <Text style={styles.buttonStyle}
                      onPress={this.buttonPressed}>
                    按我
                </Text>
                <Text style={styles.textPromptStyle}
                      ref="text2">
                    文字提示
                </Text>
                <View>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
                               value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonStyle: { //文本组件样式,定义简单的按钮
        fontSize: 20,
        backgroundColor: 'grey'
    },
    textPromptStyle: { //文本组件样式
        fontSize: 20
    },
    textInputStyle: { //文本输入组件样式
        width: 150,
        height: 50,
        fontSize: 20,
        backgroundColor: 'grey'
    }
});

...

当按钮点击的时候就会修改属性，让TextInput组件不能再编辑，让字体变大,这个操作最好通过setState完成, 上面的做法只是为了给大家演示如何修改属性。

测量控件measure

使用View组件的onLayout回调函数是获取组件的宽，高与位置信息的最好办法，但是有时候组件是代码生成的，只能使用组件的measure成员函数测量控件了，这时候就需要根据组件的引用去调用组件的measure函数

下面代码不是通过代码生成的组件，主要是为了演示通过组件的引用调用measure函数。

...
class AwesomeProject extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this.tempfunc = this.tempfunc.bind(this);
        this.getPosition = this.getPosition.bind(this);
    }

    componentDidMount() {
       // this.tempfunc();
        //在componentDidMount执行完后才可以获取位置,不能直接调用tempfunc函数
       var aref = this.tempfunc;
        //这个位置保险起见延迟1毫秒,其实把数字改成0默认也在componentDidMount之后执行
        window.setTimeout(aref, 1);//延迟一毫秒执行tempfuc
    }

    tempfunc() {
        //测量 获取位置, 参数是回调方法
        this.refs.textInputRefer.measure(this.getPosition)
    }

    getPosition(fx, fy, width, height, px, py) {
        console.log('getPosition');
        console.log("width:" + width); //控件宽
        console.log("height:" + height);//控件高
        console.log("fx:" + fx); //距离父控件左端 x的偏移量
        console.log("fy:" + fy); //距离父控件上端 y的偏移量
        console.log("px:" + px); //距离屏幕左端 x的偏移量
        console.log("py:" + py); //距离屏幕上端 y的偏移量
    }

    render() {
        return (
            // 为了保重TextInput组件居中显示多用一个View包裹
            <View style={styles.container}>
                <View style={{borderWidth:1}}>
                    <TextInput style={styles.textInputStyle}
                               ref="textInputRefer"
                               value={this.state.textInputValue}
                               onChangeText={(textInputValue)=>this.setState({textInputValue})}/>
                </View>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textInputStyle: { //文本输入组件样式
        width: 200,
        height: 55,
        fontSize: 50,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 0,
        paddingBottom: 0,
        backgroundColor: "blue"
    }
});
...

运行结果：

更多精彩请关注微信公众账号likeDev