возврат из навигации в реагировать на нативные мне дать неопределенный в this.props.navigation.state.params.filePath

Question

мне нужна помощь :). мой проект состоит из 2 страниц в реагировать родной, MainPage и SoundRecord. мой экран инициализации MainPage и когда я нажимаю кнопку «взять звук» я перехожу к другому компоненту для записи звука (я двигаюсь с помощью встроенной навигации). когда я вернусь, я хочу вернуть filePath (где он сохраняет файл ..). я хочу вставить его в состояние.

когда я делаю это в MainPage:

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

выдает ошибку: undefined не является объектом (оценивается как this.props.navigation.state.params.filePath) и я понимаю это, потому что я начинаю свой проект с MainPage, и у меня нет filePath со страницы SoundRecord.

что я могу сделать? Могу ли я проверить, если this.props.navigation.state.params.filePath! == не определено? как это сделать? я стараюсь почти все ...

я поставил соответствующий код:

MainPage:

    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

Если вы хотите обновить что-то на предыдущей странице, вы можете сделать это следующим образом:

1. Создать в MainPage функцию, которая обновляет состояние с помощью нового пути к файлу.
2. Передать функцию как параметр.
3. Используйте переданную функцию в SoundRecord для обновления состояния в MainPage

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.

Answer 2

Пожалуйста, попробуйте это. Это может помочь вам

Добавьте это в Экран MainPage:

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