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与定义的要匹配;
}

第二种方案

设置组件的属生 ref = “view”
<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 });//这里和第一种方法不一样;
}