第五章、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 });//這裏和第一種方法不一樣;
    }