从 React Native 中的导航返回给我 this 中未定义 这个.props.navigation.state.

Question

我需要帮助:)。我的项目是 2 个页面，分别是 React native、MainPage 和 SoundRecord。我的初始化屏幕是主页，当我按下"发出声音"按钮时我移动到另一个组件来录制声音（我使用 React 本机导航移动）。当我回来时，我想返回文件路径（它保存文件的地方..）。我想将其插入状态。

当我在主页中执行此操作时：

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

它给出错误：undefined 不是对象（评估 'this.props.navigation.state.params.filePath'）我理解这一点，因为我从主页开始我的项目，但我没有来自 SoundRecord 页面的 filePath。

我能做什么？我可以检查一下这个是否.props.navigation.state.params.filePath ！== undefined？怎么办？我几乎尝试了一切...

我把相关的代码：

主页：

    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>
    );
  }
}

录音 当我完成录制时，我发送文件路径如下：

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

}

谢谢！

Answer 1

如果您想更新上一页上的某些内容，则可以通过以下方式进行操作。

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

主页

在MainPage中添加以下内容

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

更新MoveToSoundRecordPage函数以将发送文件路径作为参数：

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

录音

然后在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 中的状态。

Answer 2

请尝试一下。它可能会帮助你

在主页屏幕中添加以下内容：

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