Question

我编写了一个<Wizard>和一个<Router>组件，其反应导航如下：

 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中的函数，loginIn是主App.js中的状态（onSave是用于更改loginIn的布尔值的函数）

该功能有效，但只有<Router>和<Wizard>获得道具更新。导航堆栈中的子组件仅获得初始值，不会从App.js将其道具更新为更改后的状态

我在App.js的onSave（）-Function中尝试过此操作

_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，因此我必须再次登录。

如何为导航屏幕保存“已登录”状态？

当前没有真正的登录逻辑，只是像clickdummy那样单击按钮：

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

<Wizard>和<Router>都具有正确的loginIn当前状态（buttonPress之前为false，buttonPress之后为true-即使我导航）。只是屏幕组件的参数一直存在，直到我离开登录屏幕为止。之后，将其设置回初始状态。

我认为问题在于，一旦创建了导航器，初始状态就保持不变，或者导航组件不会重新渲染？...

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

博览会小吃：https://snack.expo.io/0RQU64li_

如何在反应导航中动态更改导航屏幕的道具

0 个答案: