如何在两个页面之间传输数据以响应本机导航

Question

我正在尝试在两页的React之间传输数据。我在newMood.js上有数据，可以在其中创建新的Mood，我想将其中的信息添加到Home.js页面。我怎样才能做到这一点？

这里是newMood.js的简化代码。我的尝试有些注释。

export default class newMood extends Component{
  static navigationOptions = {
    title: 'New Entry',
    headerStyle: {
      backgroundColor: 'white',
    },
    headerTintColor: '#00b3b3',
  };

  constructor(props){
    super(props)
    this.state={
      mood: '',
      energy: '',
      activity: '',
      sleep: '',
      journal:'',
    }
  }

  //saveData = () => {
   // const {mood, energy, activity, sleep, journal} = this.state;
   // let myArray={
   //   mood: mood,
   //   energy: energy,
   //   activity: activity,
   //   sleep: sleep,
   //   journal: journal
    //}
    //alert("mood: " + mood + "\nenergy: " + energy + "\nactivity: " + activity + "\nsleep: " + sleep + "\njournal: " + journal)
    //return (mood, energy, activity, sleep, journal);
  //};

  render() {
    const { navigate } = this.props.navigation;
    const currentMood = this.state.mood;
    const currentJournal = this.state.journal;
    return(
          <View style={styles.container}>
            <Text style={styles.mood}>Mood</Text>
            <View style={styles.container2}>
            <TouchableOpacity
              disabled={currentMood.length !== 0 && currentMood !== 'excited'}
              style={styles.button}
              onPress={() => this.setState({mood: 'excited'})}
            >
             <Text style={styles.answer}>😆</Text>
            </TouchableOpacity>
            <TouchableOpacity
              disabled={currentMood.length !== 0 && currentMood !== 'happy'}
              style={styles.button}
              onPress={() => this.setState({mood: 'happy'})}
            >
             <Text style={styles.answer}>😀</Text>
            </TouchableOpacity>
            </View>
            <Text style={styles.energy}>Journal</Text>
            <View style={styles.container3}>
            <TextInput
              multiline
              numberOfLines={3}
              color="white"
              style={styles.textInput}
              onChangeText={journal => this.setState({journal})}
            />
            <TouchableOpacity
              style={styles.submit}
              //onPressIn={this.saveData}
              onPressOut={() => navigate('Home')}
              //onPressOut={() => navigate('Home', { currentMood, currentEnergy, currentActivity, currentSleep, currentJournal })}
            >
             <Text style={styles.answer}>Submit</Text>
            </TouchableOpacity>
            </View>
          </View>
      );
    }
  }

这是来自Home.js的代码，我试图在其中检索信息，但是由于未定义的对象而导致错误：

export default class Home extends Component {
  static navigationOptions = {
    title: 'Entries',
    headerStyle: {
      backgroundColor: 'white',
    },
    headerTintColor: '#00b3b3',
  };

  render() {
    const { navigate } = this.props.navigation;
    //const { currentMood, currentJournal } = this.props.route.params
    return (
      <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigate('newMood')}
      >
      <Text style={styles.plus}>+</Text>
      </TouchableOpacity>
      </View>
    );
  }
}

我将不胜感激！

Answer 1

在newMood类中，将数据作为具有键-值对的对象发送，在另一页上通过键获取值

<TouchableOpacity
  style={styles.submit}
  //onPressIn={this.saveData}
  onPressOut={() => navigate('Home', { 'data': { currentMood, 
  currentEnergy, currentActivity, currentSleep, currentJournal }})}>
       <Text style={styles.answer}>Submit</Text>
   </TouchableOpacity>            

在班级首页

componentDidMount(){
  // prints the transfered data
  console.log(this.props.navigation.getParam('data'));
}