return 从 react native 中的导航给我 this.props.navigation.state.params.filePath 中的未定义

Question

我需要帮助:)。我的项目在 React Native、MainPage 和 SoundRecord 中有 2 个页面。我的初始屏幕是 MainPage，当我按下按钮时 'take sound' 我移动到另一个组件来录制声音（我移动反应本机导航）。当我回来时，我想 return filePath（保存文件的位置..）。我想把它插入状态。

当我在 MainPage 中执行此操作时：

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

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

我能做什么？我可以检查 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 当我完成录音时，我会像这样发送文件路径：

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

}

谢谢！

Answer 1

请试试这个。可能对你有帮助

在主页屏幕中添加：

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

Answer 2

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

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

主页

在您的 MainPage 中添加以下内容

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

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

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

return 从 react native 中的导航给我 this.props.navigation.state.params.filePath 中的未定义

return from navigation in react native give me undefined in this.props.navigation.state.params.filePath

reactjs

react-native

react-native-navigation

主页

录音

小吃