之前文章中，我们使用了许多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