转载:
ref属性不只是string
ref属性不仅接受string类型的参数,而且它还接受一个function作为
callback。这一特性让开发者对ref的使用更加灵活。
render() {
return <TextInput ref={
(c) => this._input = c} />;
},componentDidMount() {
this._input.focus();
},
1
2
3
4
5
6
render(){
return <View ref={
(e) => this._view = e }
/>//将组件view作为参数赋值给了
this._view
}
componentDidMount(){
this._view.style = {
backgroundColor:
'red',
width:
100,0);">height:
200 }
}
需要提醒大家的是,只有在组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。
心得:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。
让组件做到局部刷新setNativeProps
有时候我们需要直接改动组件并触发局部的刷新,但不使用state或是props。
setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ,则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。
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
import React,{
AppRegistry,Component,StyleSheet,Text,View,TextInput
} from
'react-native';
class @H_301_465@AwesomeProject extends @H_
301_465@Component {
constructor(props) {
super(props);
this.state = {
textInputValue:
''
};
this.buttonPressed =
this.buttonPressed.bind(
this);
}
buttonPressed() {
let textInputValue =
'new value';
this.setState({textInputValue});
this.refs.textInputRefer.setNativeProps({
editable:
false
});
this.refs.text2.setNativeProps({
style:{
color:
'blue',fontSize:
30
}
});
}
render() {
return (
<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:
'grey'
}
});
AppRegistry.registerComponent(
'Redux',() => AwesomeProject);
当点击按钮时,会刷新3个控件的值,但是只是单独去改变,而不是通过改变state状态机的机制来刷新界面,在重复需要多次刷新时使用,普通的时候直接通过state改变即可。 这样用的缺点就是局部改变,回导致状态机混乱。