callback。這一特性讓開發者對ref的使用更加靈活。
render() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },

• 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

需要提醒大家的是，只有在元件的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'
 
;

classAwesomeProjectextendsComponent {
    // 構造
    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

當點選按鈕時，會重新整理3個控制元件的值，但是隻是單獨去改變，而不是通過改變state狀態機的機制來重新整理介面，在重複需要多次重新整理時使用，普通的時候直接通過state改變即可。
這樣用的缺點就是區域性改變，回導致狀態機混亂。