RNのローカルリフレッシュ

変換元:https://blog.csdn.net/que_li/article/details/52872479
refプロパティはstring refプロパティだけでなくstringタイプのパラメータも受け入れます.functionは

callback。         ref       。
render() {
    return (c) => this._input = c} />;
  },
  componentDidMount() {
    this._input.focus();
  },

1
2
3
4
5
6
7

render(){
    return (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を返すことに注意してください.これを呼び出している場合は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'}>   //         
          container}>
              this.buttonPressed}>
                    
              
              "text2">
                      
              
            
              "textInputRefer"
                value={this.state.textInputValue}
                onChangeText={(textInputValue)=>this.setState({textInputValue})}
              />
            
        
      );
    }
}

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で直接変更すればいいです.このような欠点は局所的に変化し,状態機の混乱を招くことである.