React Native ref高级用法&&setNativeProps使用

来源：互联网发布：单片机与嵌入式的联系编辑：程序博客网时间：2024/04/19 14:33

ref属性不只是string

http://blog.csdn.net/que_li/article/details/52872479
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 等组件生命周期中的方法。

import React, {  AppRegistry,  Component,  StyleSheet,  Text,  View,  TextInput} from 'react-native';class AwesomeProject extends 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 (          //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'    }});AppRegistry.registerComponent('Redux', () => AwesomeProject);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改变即可。
这样用的缺点就是局部改变，回导致状态机混乱。

0 0