第五章、ReactNative直接修改View的属性方法

ReactNative直接修改View的属性方法

第一种方案

设置组件的属生 ref = “view”

     <TouchableOpacity
                    ref = "view" //这里设置对当前组件的引用, "view"可以随意定义
                    onPress = { this.onButtonClicked.bind(this) }
                    >
                    <Text
                        style = { {
                        width:150,
                        height:100,
                        backgroundColor : "#FF0000",
                        textAlignVertical  : "center",
                        margin : 10,
                        fontSize : 15,
                        textAlign : "center"} }>chenzhen</Text>
           </TouchableOpacity>

如何引用当前对象并修改它的属性呢?

    onButtonClicked() {
        ToastAndroid.show("OnButtonClicked",ToastAndroid.SHORT);
        this.refs.view.setNativeProps({ margin : 30 }); //这里的refs.view, view与定义的要匹配;
    }

第二种方案

设置组件的属性 component => this.view = component

     <TouchableOpacity
                    ref = { component => this.view = component } //这里设置对当前组件的引用
                    onPress = { this.onButtonClicked.bind(this) }
                    >
                    <Text
                        style = { {
                        width:150,
                        height:100,
                        backgroundColor : "#FF0000",
                        textAlignVertical  : "center",
                        margin : 10,
                        fontSize : 15,
                        textAlign : "center"} }>chenzhen</Text>
           </TouchableOpacity>

如何引用当前对象并修改它的属性呢?

    onButtonClicked() {
        ToastAndroid.show("OnButtonClicked",ToastAndroid.SHORT);
        this.view.setNativeProps({ margin : 30 });//这里和第一种方法不一样;
    }