从反应中导航返回本机在this.props.navigation.state.params.filePath中给我未定义

Question

我需要帮助:)。 我的项目是2个页面，分别是react native，MainPage和SoundRecord。 我的初始化屏幕是MainPage，当我按下“获取声音”按钮时 我移动到另一个组件来录制声音（我在响应本机导航时移动）。 当我回来时，我想返回filePath（保存文件的位置..）。 我想将其插入状态。

当我在MainPage中这样做时：

this.state{
filePath: this.props.navigation.state.params.filePath
}

给出错误： 未定义不是对象（评估'this.props.navigation.state.params.filePath'） 并且我理解这一点，因为我从MainPage开始我的项目，而从SoundRecord页面上没有filePath。

我该怎么办？ 我可以检查this.props.navigation.state.params.filePath！==未定义吗？ 怎么做？我几乎尝试了所有东西...

我输入了相关代码：

主页：

    import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import { RNS3 } from 'react-native-aws3';
import { aws } from './keys';
import SoundRecord from './SoundRecord'

  export default class MainPage extends Component {
    constructor(props){
        super(props);
        this.state={
            file:'' ,
            config:'',
            filePath: '',
            fileName: '',
            tag:''
        };
      }
  MoveToSoundRecordPage = () => {
    this.props.navigation.navigate('SoundRecord');
  }
  render() {
        return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.MoveToSoundRecordPage}>
          <Text>take sound</Text>
        </TouchableOpacity>
        {/* <SoundRecord takeSound={this.takeSound}/> */}
        <Text>{this.state.fileName}</Text>
        <TouchableOpacity onPress={this.UploadToAWS.bind(this)}>
          <Text>Upload To Aws</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

SoundRecord完成录音后，我将像这样发送filePath：

finishRecord = (filePath) => {
this.props.navigation.navigate('MainPage',{filePath});

}

谢谢！

Answer 1

请尝试这个。可能会对您有帮助

在 MainPage屏幕中添加此内容

：

componentWillMount() {
  const filePath = this.props.navigation.getParam('filePath', '');
  this.setState({ filePath:filePath })
}

Answer 2

如果您要更新前一页上的内容，则可以通过以下方式进行。

1. 在MainPage中创建一个函数，用新的文件路径更新状态。
2. 将该函数作为参数传递。
3. 使用SoundRecord中传递的函数来更新MainPage中的状态

主页

在您的MainPage中添加以下内容

sendFilepath = (filePath) => {
  this.setState({filePath})
}

更新MoveToSoundRecordPage函数以将sendFilepath用作参数：

MoveToSoundRecordPage = () => {
  this.props.navigation.navigate('SoundRecord', { sendFilepath: this.sendFilepath });
}

SoundRecord

然后在SoundRecord页中，您要更新finishRecord，以便它调用您已传递的函数。

finishRecord = (filePath) => {
  this.props.navigation.state.params.sendFilepath(filePath)
  this.props.navigation.goBack();
}

小吃

这是小吃https://snack.expo.io/@andypandy/navigation-passing-function，显示了将名为sendFilepath的功能从Screen1传递到Screen2的情况。然后，它在Screen2中调用传递的函数，并更新Screen1中的状态。