React Navigationで異なる画面間でTextInputの小道具を渡す

Question

フォーム画面から2つのパラメータを取得し、React Navigator経由でそれらを渡して前の画面に表示する方法が完全に失われています。

問題のアプリセクションは次のようになります。
1. touchablehighlight to screenを選択します。
2.入力タイトルと説明を入力してpress on submit
3. onpressは、キーを使用してパラメータを前のページに送信する関数を実行します。
4.プロンプトが表示された状態で元のページに戻ります。

私はプロセスで複数の問題が生じています：
1.私が正しくドキュメントを理解していた場合、各ページには、一意のキーを持っていると私は、しかし、未知の、this.props.navigation.state.key経由でそれを見つけることを試みました私には、リフレッシュ時にID番号が変わるでしょう。
2.関数が実行される問題2が発生しますが、元のページにリダイレクトされません。
3. .dispatchの後に.navigate行を試しましたが、元のページの新しいコピーを開き、控えめに渡された新しいプロップを表示しません。

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

あなたが "次のページ" からパラメータを取得しようとしている場合は、2つのアプローチを持つことができます。

1、AsyncStorageでのparamsを保存あなただけFormsクラスからの情報を表示しようとしているのparams

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

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

Answer 2

とナビゲーションSETPARAMS機能を使用して、

2（提案） Workout classで、正しい??

Workoutクラスから、その状態を更新する関数を作成します。

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

そのルートをプッシュすると、その機能はFormsクラスに渡されます。あなたの条件はFormsクラスに満たされ、あなたがWorkoutコンポーネントを更新したいたら

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

、このためAsyncStorageを使用しないでくださいthis.props.navigation.state.params.updateWorkoutState(val1,val2)

でそれを呼び出します。