Как динамически изменять реквизиты экранов навигации в react-navigation

#reactjs #react-native #expo #react-navigation #react-navigation-stack

#reactjs #react-native #выставка #react-навигация #react-navigation-stack

Вопрос:

Я написал <Wizard> и <Router> компонент с react-navigation вот так:

  generateNavigator = () => {
  const { steps, title, onSave, loggedIn } = this.props;
  const navigationRoutes = {};
  steps.forEach((step, index) => {
   const routeOptions = {
    screen: step.component,
    params: {
     bg: step.bg,
     text: step.text,
     image: step.image,
     onSave: onSave,
     loggedIn: loggedIn
    }
   };
   navigationRoutes[step.routeName] = routeOptions;
  });

  const navigationOptions = {
   headerStyle: {
    backgroundColor: '#ffffff',
    paddingHorizontal: 5,
   },
   headerTintColor: '#111111',
   headerTitle: title,
  };

  const Stack = createStackNavigator(navigationRoutes, { navigationOptions });
  const AppContainer = createAppContainer(Stack);
  return AppContainer
 }
  

OnSave — это функция в основном App.js а LoggedIn — это состояние из основного App.js (OnSave — это функция для изменения bool-значения LoggedIn)

Функция работает, но только <Router> и <Wizard> получает обновление реквизита. Дочерние компоненты, формирующие стек навигации, получают только начальное значение и не обновляют свои реквизиты до измененного состояния с App.js

Я пробовал это в моем App.js OnSave()-Функция:

 _onSave = (navigation) => {
    console.log(navigation);
    navigation.setParams({
      loggedIn:
        navigation.state.params.loggedIn === false ? true : false
    });
    this.state.loggedIn === false ? this.setState({ loggedIn: true }) : this.setState({ loggedIn: false });

}
  

Это правильно устанавливает параметр, но если я вернусь с экрана или перейду дальше и снова перейду к экрану входа в систему, состояние вернется к false, и мне придется снова войти в систему.

Как я могу сохранить состояние «LoggedIn» и для экранов навигации?

В настоящее время нет реальной логики входа в систему, просто щелчок кнопкой мыши в виде clickdummy, подобный этому:

 <Button
     style={styles.marginButton}
     onPress={() => {
      onSave(navigation);
     }}
>
  

Оба <Wizard> и <Router> имеют правильное текущее состояние LoggedIn (false перед нажатием кнопки и true после нажатия кнопки — даже если я перемещаюсь). Просто параметры экранного компонента остаются, пока я не уйду с экрана входа в систему. После этого он возвращается в исходное состояние.

Я думаю, проблема в том, что после создания навигатора начальное состояние остается таким, какое оно есть, или, может быть, компоненты навигации не перезаписываются?…

Мне нужен способ изменить и сохранить параметр, даже если я перейду на другой экран.

Закуска на выставке:https://snack.expo.io/0RQU64li_

Комментарии:

1. не могли бы вы загрузить пример codesandbox?

2. еще раз обновил ссылку, извините: snack.expo.io/0RQU64li_

3. generateNavigator вызывается в конструкторе, что означает, что он запускается один раз. и именно здесь ваши реквизиты перестают распространяться

4. может быть, попробуйте следовать reactnavigation.org/docs/auth-flow

5. Куда я должен поместить generateNavigator(), чтобы обновить его значения из state-change?