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改变即可。 这样用的缺点就是局部改变，回导致状态机混乱。