web-dev-qa-db-de.com

Wie übergebe ich Werte an andere Komponenten in React-Native-Router-Flux?

Mein Code ist:

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

Ich habe com1 In com2 Geändert.

Aber ich muss Werte für das Eingabefeld von Com1 An Com2 Übergeben.

Wie kann ich das machen?

28
Eric Chan

Sie können Daten wie folgt übergeben:

Actions.com2 ({text: 'Hallo Welt'})

Sie können Ihre Daten in com2 wie folgt wiederherstellen:

this.props.text

Weitere Informationen finden Sie im nächsten Tutorial:

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

56

Darüber hinaus (und für diejenigen in den Kommentaren, die sagten, dass es nicht funktioniert hat) möchten Sie vielleicht unten versuchen. Wenn Sie die

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

Com2 sollte "Requisiten" übergeben

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

Daten durch einen Eingang leiten,

   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 });
}
}

Um Wert in der zweiten Seite zu bekommen

   export default class Com2 extends Component {

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

Sie können auf diesen Link verweisen: https://react-native-solutions.blogspot.com/2018/07/passing-data-between-screens-in-react.html

1
Pooja Verma

Verwenden Sie die Push-Methode wie folgt:

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

Dadurch wird die Szene auf den Stapel verschoben und ein Übergang zur neuen Szene ausgeführt.

0
sahil555