react native 中View組件中的ref屬性是什麽
在用Reactnative寫工程時，默認奇妙的有一種像OC中，或者Java 中或者當前類的私有屬性的想法，state 和props都不能滿足時，就是ref
它能達到其他語言中持有一個view組件，並且局部的刷新
ref 接受值為string類型的參數或者一個函數function
callback。這一特性讓開發者對ref的使用更加靈活。
render() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount() {
this._input.focus();
},
1
2
3
4
5
6
7
1
2
3
4
5
6
7
render(){
return <View ref={ (e) => this._view = e } />//將組件view作為參數賦值給了this._view
}
componentDidMount(){
this._view.style = { backgroundColor:‘red‘,width:100,height:200 }
}
需要提醒大家的是，只有在組件的render方法被調用時，ref才會被調用，組件才會返回ref。如果你在調用this.refs.xx時render方法還沒被調用，那麽你得到的是undefined。
心得：ref屬性在開發中使用頻率很高，使用它你可以獲取到任何你想要獲取的組件的對象，有個這個對象你就可以靈活地做很多事情，比如：讀寫對象的變量，甚至調用對象的函數。
讓組件做到局部刷新setNativeProps
有時候我們需要直接改動組件並觸發局部的刷新，但不使用state或是props。
setNativeProps 方法可以理解為web的直接修改dom。使用該方法修改 View 、 Text 等 RN自帶的組件
，則不會觸發組件的 componentWillReceiveProps 、 shouldComponentUpdate
、componentWillUpdate 等組件生命周期中的方法。
‘use strict‘ import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, View, TextInput } from ‘react-native‘; import Dimensions from ‘Dimensions‘; // 屏幕寬度 var screenWidth = Dimensions.get(‘window‘).width; class RNRefDetail extends Component { // 構造 constructor(props) { super(props);// 初始狀態 this.state = { textInputValue: ‘‘ }; this.buttonPressed = this.buttonPressed.bind(this); } buttonPressed() { //當按鈕按下的時候執行此函數 let textInputValue = ‘yuanmenglong‘; 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‘ } }); module.exports = RNRefDetail;
當點擊按鈕時，會刷新3個控件的值，但是只是單獨去改變，而不是通過改變state狀態機的機制來刷新界面，在重復需要多次刷新時使用，普通的時候直接通過state改變即可。
這樣用的缺點就是局部改變，回導致狀態機混亂。
在用Reactnative寫工程時，默認奇妙的有一種像OC中，或者Java 中或者當前類的私有屬性的想法，state 和props都不能滿足時，就是ref
它能達到其他語言中持有一個view組件，並且局部的刷新
ref 接受值為string類型的參數或者一個函數function
callback。這一特性讓開發者對ref的使用更加靈活。
render() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount() {
this._input.focus();
},- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
render(){
return <View ref={ (e) => this._view = e } />//將組件view作為參數賦值給了this._view
}
componentDidMount(){
this._view.style = { backgroundColor:‘red‘,width:100,height:200 }
}- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
需要提醒大家的是，只有在組件的render方法被調用時，ref才會被調用，組件才會返回ref。如果你在調用this.refs.xx時render方法還沒被調用，那麽你得到的是undefined。
心得：ref屬性在開發中使用頻率很高，使用它你可以獲取到任何你想要獲取的組件的對象，有個這個對象你就可以靈活地做很多事情，比如：讀寫對象的變量，甚至調用對象的函數。
讓組件做到局部刷新setNativeProps
有時候我們需要直接改動組件並觸發局部的刷新，但不使用state或是props。
setNativeProps 方法可以理解為web的直接修改dom。使用該方法修改 View 、 Text 等 RN自帶的組件
，則不會觸發組件的 componentWillReceiveProps 、 shouldComponentUpdate
、componentWillUpdate 等組件生命周期中的方法。
‘use strict‘ import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, View, TextInput } from ‘react-native‘; import Dimensions from ‘Dimensions‘; // 屏幕寬度 var screenWidth = Dimensions.get(‘window‘).width; class RNRefDetail extends Component { // 構造 constructor(props) { super(props); // 初始狀態 this.state = { textInputValue: ‘‘ }; this.buttonPressed = this.buttonPressed.bind(this); } buttonPressed() { //當按鈕按下的時候執行此函數 let textInputValue = ‘yuanmenglong‘; 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‘ } }); module.exports = RNRefDetail;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
當點擊按鈕時，會刷新3個控件的值，但是只是單獨去改變，而不是通過改變state狀態機的機制來刷新界面，在重復需要多次刷新時使用，普通的時候直接通過state改變即可。
這樣用的缺點就是局部改變，回導致狀態機混亂。
react native 中View組件中的ref屬性是什麽