react nativeでのコンポーネント間の値の受け渡しについて

みなさんこんにちは！個別指導塾コミット塾長、AWESOMEの開発担当の船津です。

今回はコンポーネント間のデータ受け渡しについて考えてみます。

コンポーネント間でのデータ受け渡し方法

コンポーネント間でのデータ受け渡し方法はいくつかあります。
– propsでの受け渡し
– コールバックを利用する
– reduxを使ってstateをglobalに参照できるようにする

redux以外の方法をまとめてみましょう。

親から子コンポーネントへの受け渡し

値の受け渡しについてちょっとまとめてみましょう。
例えばこんな感じですね

親コンポーネント

<View>
 <ChildComponent someWord={'Hello, World'} />
</View>

子コンポーネント

<View>
 <Text>{this.props.someWord}</Text>
</View>

表示

“Hello,World”

コールバックによる受け渡し（子のアクションから親の関数を実行）

親コンポーネント

someFunction(value){
  set.setState({
    number: value + 1
   })
}

<View>
 <ChildComponent onPress={someFunction} value={this.state.number} />
</View>

子コンポーネント

<View>
 <Text onPress={this.props.someFunction}>Press!!</Text>
  <Text>{this.props.value}</Text>
</View>

まとめてみました

次回はreact-native-router-fluxでシーン間のデータ受け渡しについて学んでみましょう