【REACT NATIVE チュートリアル シリーズ 3】React_html/css_WEB-ITnose を使いこなすための基礎となる関数バインディングと FlexBox

氷見は React を書く際に主に 2 つの知識点に遭遇し、それを皆で復習する必要があると感じました。

1. 関数バインディング
2. FlexBox レイアウト

1: 関数バインディング

最初にコード スニペットを見てみましょう:

 constructor(props) {      super(props);      this.state = {        myName:'I am MyName!',      };  }  componentWillMount() {    this.state.myName='cwm';  }    testFun1(){    this.state.myName='tf1';    Alert.alert('Himi', ' testFun1 ');      }  testFun2(){    Alert.alert('Himi', ' testFun2 ');  }

MyName は状態で宣言されます

constructor: コンポーネントのコンストラクター

componentWillMount: コンポーネントのプリロード前に呼び出されるライフサイクル関数

testFun1、testFun2: は 2 つのカスタム関数です。

レンダリングのセクションを続けて見てみましょう:

<TouchableHighlight          underlayColor='#4169e1'          onPress={this.testFun1}            >             <Image             source={require('./res/himi.png')}             style={{width: 70, height: 70}}             />        </TouchableHighlight>         <TouchableHighlight          underlayColor='#4169e1'          onPress={this.testFun2}            >             <Image             source={require('./res/himi.png')}             style={{width: 70, height: 70}}             />        </TouchableHighlight>

ここでは 2 つの画像コンポーネントが作成され、タッチ コンポーネントが両方に追加され、カスタム関数 testFun1 がtestFun2

を使用すると、最初の画像をクリックすると、次のようなエラーが報告されます: (クリックすると動的な画像が表示されます)

エラーは、これをカスタム関数で使用したい場合は関数バインディングを実行する必要があるため、これは未定義ではないことを意味します。

関数バインディング: 関数バインディングにより、関数内の this がコンポーネント インスタンスへの参照として使用されるようになります。つまり、カスタム関数で this を使用したい場合は、最初にこれを実行してください。 binding(this)

とても慎重な子供たちにはバレてしまうでしょう！これをcomponentWillMount関数で使用しているのに、なぜパスしてしまうのでしょうか?なぜなら、componentWillMount はコンポーネントのライフサイクル関数だからです。

一般的に使用される関数バインド方法は次のとおりです。

1. 次のようなライフサイクル関数でのバインド:

this.testFun1 = this.testFun1.bind(this)

2次のように、使用する場所に直接バインドします。

onPress={this.testFun1.bind(this)}

3. 次のように、ラムダを使用する場所に直接バインドします。

onPress={()=>{    this.state.myName='tf1';    Alert.alert('Himi', ' testFun1 ');}}

1: FlexBox のレイアウト

この記事では CSS FlexBox については詳しく説明しません。第一に、インターネット上にはチュートリアルがたくさんあります。第二に、それらは書かれていない可能性があります。他の人に注意してください- -…。ただし、氷見氏はここで 2 つのリンクを推奨しています。これらは学習には十分です:

1. 詳細な紹介と分析: http://www.tuicool.com/articles/vQn6ZrU

2. 直感的なチュートリアル: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool