Как передать состояние между страницами с помощью реагирующей навигации?

Question

Я пытаюсь передать состояние с главной страницы на страницу с подробностями. Страница сведений успешно меняет родительское состояние, вызывая функцию (через реквизит). Однако повторная визуализация не запускается, и страница сведений не обновляется (несмотря на правильное обновление реквизита). Как я могу передать состояние дочерней странице (подробности) так, чтобы оно вызывало повторную визуализацию?

Похоже, что аналогичный вопрос задают здесь но я не совсем понимаю Я не использую Redux, так как это маленькое приложение.

//Navigator Setup
const AppNavigator = createStackNavigator({
    Home: {
        screen: Home} 
    Details: {
        screen: Details}
);

//Home page:
this.props.navigation.navigate("Details", {
    changeDetails: this.changeDetails
    details: this.state.details})
}

//Details page
let details = props.navigation.getParam("details", "n/a");
let changeDetails = props.navigation.getParam("changeDetails", "n/a");

//change things
//render stuff

Answer 1

Вы правильно передали данные, но при извлечении данных вы ошиблись let details = props.navigation.getParam("details", "n/a"); просто положи this.props как это console.log(props.navigation.getParam.changeDetails); console.log(props.navigation.getParam.details) console.log только для целей отладки, вы можете назначить его любой переменной. И вы получите данные в виде объекта или в json form.set, это в конструкторе, render () или где вы хотите использовать эти данные

Answer 2

Передача данных с помощью navigation.navigate не вызовет повторную визуализацию, поскольку она передает копию реквизита. Вам нужно будет найти другой способ отправки реквизита, чтобы ваш компонент узнал об изменениях. Вы можете, например, подключить ваш компонент к вашему состоянию редукции (при условии, что вы используете редукс). Если вы не используете redux, вы можете отправить функцию обновления из родительского компонента navigate('Child', { refresh: refreshFunction } в Child

После этого вы можете получить доступ к этой функции у ребенка (через что-то вроде this.props.navigation.state.params.refresh(); или const refresh() = this.props.navigation.getParam('regresh')) перед обратным действием. Это приведет к обновлению родительского состояния для обновления.

Я надеюсь, что это поможет вам

Answer 3

как сказано в документе:

this.props.navigation.navigate('YOUR TARGET NAME', {
          itemId: 86,
          otherParam: 'anything you want here',
        });

здесь полный пример, удачи

редактировать: в дочернем компоненте в методе componentDidUpdate() вы должны убедиться, что если реквизиты изменены, установите новые реквизиты в состояние, тогда компонент будет перерисован с новым состоянием:

componentDidUpdate(){
      if ('YOUR DATA FROM PARENT' != 'PREVIOUS DATA FROM PARENT SAVED IN STATE'){
                this.setState({yourState: 'YOUR DATA FROM PARENT'})
       }