在React Navigation

Question

我完全迷失了如何从表单屏幕中获取两个参数并通过React Navigator传递它们并在前一个屏幕上显示它们。

相关的应用部分的工作方式如下：
1。 touchablehighlight形成屏幕。
2。输入标题和说明，然后按提交onpress
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' >
        	<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

如果您尝试从“下一页”获取参数，则可以采用两种方法。

1，将参数保存在AsyncStorage中（建议）

2，使用导航setParams函数和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

您只是试图在Forms上显示Workout class班级的信息，正确吗？

从Workout课程中，创建一个更新其状态的函数。

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

当您按下该路线时，将该功能传递到Forms课程。

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

在Forms课程符合您的条件并且您想要更新Workout组件后，请使用this.props.navigation.state.params.updateWorkoutState(val1,val2)

进行调用

请勿使用AsyncStorage。