Reactjs 如何在react导航中动态更改导航屏幕的道具

我编写了一个

和一个

组件，其中包含如下内容：

 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是main App.js中的一个函数，loggedIn是main App.js中的一个状态（onSave是更改loggedIn的bool值的函数）

该功能可以工作，但只有

和

获得道具更新。导航堆栈中的子组件仅获取初始值，不会将其道具更新为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”状态

目前没有真正的登录逻辑，只需点击一个按钮作为点击虚拟，如下所示：

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

{
onSave（导航）；
}}
>

和

都具有正确的loggedIn当前状态（按键前为false，按键后为true-即使我导航）。只有屏幕组件的参数会一直保留，直到我离开登录屏幕。之后，它被设置回初始状态

我认为问题是，一旦导航器被创建，初始状态保持原样，或者导航组件不会重新启动

我需要一种方法来更改和保存参数，即使我导航到另一个屏幕

---

Expo零食：

你能上传一个代码沙盒示例吗？再次更新了链接，很抱歉：

generateNavigator

在构造函数中被调用，这意味着它只运行一次。这就是你的道具停止传播的地方也许试着按照我应该把generateNavigator（）放在哪里从状态更改中更新它的值？你能上传一个codesandbox示例吗？再次更新了链接，抱歉：

generateNavigator

在构造函数中被调用，这意味着它只运行一次。这就是你的道具停止传播的地方也许试着跟随我应该把generateNavigator（）放在哪里，从状态变化中更新它的值？