コンポーネント間のデータ転送React-native

私は2つのコンポーネントを持っています。プロパティデータをページから他のページ/コンポーネントに渡したいと思います。しかし、小道具でそれをすることができません。コンポーネント間のデータ転送React-native

<TouchableOpacity onPress={() => {this.navigateTo('component2'); setState(url: 'www.xyz.com', data: 'abc' }> 
    <View style={{ flexDirection: 'row', height: 60, justifyContent: 'center', alignItems: 'center', paddingLeft: 10 }}> 
    <Image source={deals} /> 
    <View style={{ flex: 1 }}> 
     <Text style={{ color: '#000' }}> Deal Center </Text> 
    </View> 
    </View> 
</TouchableOpacity>

とし、コンポーネント2から状態を読んでください。誰でも助けてください

出典

2016-12-26 Ratnesh K Sinha

を使用してデータにアクセスすることができる第二の成分で

_navigate(component,data) { this.props.navigator.push({ name: component, passProps: { data:data } }) }

クリックであなたのメソッドを呼び出す第二成分

に小道具を渡すことができますFlux/Redux/RxJS？ React.PropTypes.func、： –

http://stackoverflow.com/questions/38203791/communicate-between-components-in-react-native-child-parent –

LASSコーナー{ 静的propTypes = { popRouteコンポーネントを拡張しますナビゲーション：React.PropTypes.shape（{ キー：React.PropTypes.string、 }）、 }コンストラクタ（小道具）{ スーパー（小道具）。 this.state = { 名前： 'Deals'、 }; } navigateTo（ルート）{ this.props.navigateTo（ルート、 'home'）; } –

あなたは1のコンポーネントとpassPropsにナビゲータ機能を書くことができます。

例：

など、あなたのコード内でこの機能を配置します。

this.props.urlまたはthis.props.data

：あなたの第2成分で

<TouchableOpacity onPress={this.navigateTo.bind(this,'component')}> 
     ... 
</TouchableOpacity>

、次のような小道具を呼び出すことができます

ここにReaの良いチュートリアルがありますctネイティブナビゲータ、take a look

出典

2016-12-26 10:38:14

まずはルートを設定する必要があります。

<Second navigator={navigator} {...route.passProps} />

だけあなたは、あなたが使用していますあなたがthis.props.data

出典

2016-12-26 10:54:21

''は私を助けます。私はルートを追加することを忘れます。ありがとう。 –

コンポーネント間のデータ転送React-native

答えて

関連する問題