Pass TextInput Requisiten zwischen verschiedenen Bildschirmen in React Navigation

Question

Ich bin völlig verloren, wie man zwei Parameter von einem Formular-Bildschirm und übergeben sie über React Navigator und zeigen sie auf dem vorherigen Bildschirm.

Der betreffende App-Abschnitt funktioniert so:
1. touchablehighlight Bildschirm zu bilden.
2. Eingabe Titel und Beschreibung und drücken Sie Senden onpress
3. Der onpress führt eine Funktion, die die Parameter auf die vorherige Seite über einen Schlüssel sendet.
4. kehrt dann mit den Requisiten auf dem Display zur Ausgangsseite zurück.

ich mehrere Probleme mit dem Prozess habe:
1. wenn ich die Dokumentation am Verständnis richtig, jede Seite hat einen eindeutigen Schlüssel und ich versuchte es über this.props.navigation.state.key zu finden, aber unbekannt zu mir, beim Aktualisieren würde sich die ID-Nummer ändern.
2. Dies führt zu Problem 2, wo die Funktion ausgeführt wird, aber es wird nicht auf die ursprüngliche Seite umgeleitet.
3. Ich habe versucht, .navigate Zeile nach .dispatch, aber es würde eine neue Kopie der ursprünglichen Seite öffnen und nicht die neuen Requisiten anzeigen, die vermutlich weitergegeben wurden.

import React from 'react'; 
 
import styles from '../styling/style.js'; 
 
import { Text, View, Image, TouchableHighlight, TextInput, Alert } from 'react-native'; 
 
import { StackNavigator, NavigationActions } from 'react-navigation'; 
 
import Forms from './formGenerator'; 
 

 
export default class Workout extends React.Component { 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    programTitle: '', 
 
    programDescription: '' 
 
    } 
 
} 
 

 
render() { 
 
    const {navigate} = this.props.navigation; 
 
    return ( 
 
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../images/HomepageBackground.jpg")}> 
 
     <View style={styles.workoutBody}> 
 
      <Text style={styles.workoutTextBody}> {this.state.programTitle}</Text> 
 
      <Text style={styles.workoutTextBody}>{this.state.programDescription}</Text> 
 
     </View> 
 
     <View style={styles.createButton}> 
 
     <TouchableHighlight onPress={Alert.alert(this.props.navigation.state.key)} style={styles.addButtonTouch} title='test' > 
 
     \t <Text style={styles.addButtonText}>+</Text> 
 
     </TouchableHighlight> 
 
     </View> 
 
    </Image>  
 
    ); 
 
    } 
 

 
// End of the render 
 
}

import React from 'react'; 
 
import styles from '../styling/style.js'; 
 
import { Text, View, Image, TouchableHighlight, TextInput, Button, Alert } from 'react-native'; 
 
import Workout from './workouts'; 
 
import { NavigationActions } from 'react-navigation'; 
 

 

 
export default class Forms extends React.Component { 
 
constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    programTitle: '', 
 
    programDescription: '' 
 
    } 
 
} 
 

 
render() { 
 
    const {goBack} = this.props.navigation; 
 
    const {params} = this.props.navigation.state; 
 
    return ( 
 
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../images/HomepageBackground.jpg")}> 
 
     <View style={styles.workoutBody}> 
 
     <Text style={styles.formHeader}>Program Title</Text> 
 
      <TextInput 
 
      autoFocus={true} 
 
      style={styles.formBody} 
 
      onChangeText={(programTitle) => this.setState({programTitle})} 
 
      placeholder='Title' 
 
      value={this.state.programTitle} /> 
 
     <Text style={styles.formHeader}>Description (Ex. 4sets x 10reps)</Text> 
 
      <TextInput 
 
      autoFocus={true} 
 
      style={styles.formBody} 
 
      placeholder='Description' 
 
      onChangeText={(programDescription) => this.setState({programDescription})} 
 
      value={this.state.programDescription} /> 
 
     <TouchableHighlight onPress={this.addProgram} style={styles.buttonBody} title="Add Program" > 
 
      <Text>Add Program</Text> 
 
     </TouchableHighlight> 
 
     </View> 
 
    </Image>  
 
    ); 
 
    } 
 

 
addProgram =() => { 
 
    Alert.alert(this.props.navigation.state.key); 
 
    this.setState({programTitle: ''}); 
 
    this.setState({programDescription: ''}); 
 
    const setParamsAction = NavigationActions.setParams({ 
 
    params: { programTitle: this.state.programTitle, programDescription: this.state.programDescription }, 
 
    key: , 
 
}) 
 
this.props.navigation.dispatch(setParamsAction) 
 
}; 
 

 
}

Answer 1

Wenn Sie Parameter von "Nächste Seite" zu bekommen versuchen, könnten Sie zwei Ansätze haben.

1, die params in AsyncStorage speichern (vorgeschlagen)

2, Navigation setParams Funktion mit dem params mit

const setParamsAction = NavigationActions.setParams({ 
    params: { title: 'Hello' }, 
    key: 'screen-123', 
}) 
this.props.navigation.dispatch(setParamsAction) 

https://reactnavigation.org/docs/navigators/navigation-actions

Answer 2

Sie sind nur versuchen, Informationen aus der Forms Klasse anzuzeigen auf der Workout class, richtig?

Erstellen Sie aus Ihrer Klasse Workout eine Funktion, die den Status des Updates aktualisiert.

updateWorkoutState = (programTitle,programDescription) => this.setState(programTitle,programDescription) 

Pass, die bis zur Forms Klasse funktionieren, wenn Sie diesen Weg schieben.

this.props.navigation.navigate('Forms',{updateWorkoutState: this.updateWorkoutState} 

Sobald Ihre Bedingungen auf der Forms Klasse erfüllt sind und Sie die Workout Komponente zu aktualisieren, rufen Sie es mit this.props.navigation.state.params.updateWorkoutState(val1,val2)

nicht AsyncStorage für diese anwenden.