web-dev-qa-db-ja.com

React-Native-Router-Fluxの他のコンポーネントに値を渡す方法は？

私のコードは：

...
<Router>
 <Scene key="com1" component={Com1} initial/>
<Scene key="com2" component={Com2}/>
</Router>
...
com1.js
...
onPress={Actions.com2}

com1をcom2に変更しました。

ただし、Com1の入力ボックスの値をCom2に渡す必要があります。

どうやってやるの？

react-nativereact-native-router-flux
28
Eric Chan

次のようなデータを渡すことができます。

Actions.com2（{text： 'Hello World'}）

次のように、com2でデータを回復できます。

this.props.text

詳細については、次のチュートリアルに進むことができます。

https://github.com/aksonov/react-native-router-flux/blob/master/docs/v3/MINI_TUTORIAL.md

56
Alexandre Teixeira

それに加えて、（そして、それが機能しなかったと言ったコメントの人たちのために）あなたは以下を試してみてください。合格するとき

Actions.com2({text : 'Hello World'});

Com2は「props」を渡す必要があります

const Com2 = (props) => {
   return ( <View ...
    {props.text}
   ... />
);
7
user2552155

入力を介してデータを渡す、

   import React, { Component } from 'react';
   import { Text, View, TextInput, TouchableOpacity } from 'react-native';
   import { Actions } from 'react-native-router-flux';

   export default class Com1 extends Component {
   state = { text: '' };
      render() {
       return (
          <View>
             <TextInput
                value={this.state.text}
                onChangeText={text => this.setState({ text })}
            />
    <TouchableOpacity onPress={this.onPressNext.bind(this)}>
   <Text>Get Data</Text>
    </TouchableOpacity>
    </View>
    );
}

onPressNext() {
    Actions.Com2({text: this.state.text });
}
}

2番目のページで値を取得するには

   export default class Com2 extends Component {

      render() {
         return (
        <View>
         <Text>
          {this.props.text}
         </Text>
       </View>
    );
  }
 }

このリンクを参照できます： https://react-native-solutions.blogspot.com/2018/07/passing-data-between-screens-in-react.html

1
Pooja Verma

次のようにプッシュ方式を使用します。

Actions.Push('your key name',{prop you want to pass})

シーンをスタックにプッシュし、新しいシーンへのトランジションを実行します。

0
sahil555