1

我被分配到一个项目，我们需要将 React Navigation 从版本 3 升级到版本 6。查看代码我发现了一些奇怪的东西（或者至少我认为它们很奇怪），该项目包含一个 Switch Navigator 里面有两个 Stak Navigator，如下所示：

const NavigatorOne = createStackNavigator(
  {
    NavOneScreenOne: {screen: NavOneScreenOne},
    NavOneScreenTwo: {screen: NavOneScreenTwo},
    NavOneScreenThree: {screen: NavOneScreenThree},
    NavOneScreenFour: {screen: NavOneScreenFour}
  },
  {
    headerMode: 'none',
    navigationOptions: {
      header: null,
    },
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
  }
);

const NavigatorTwo = createStackNavigator(
  {
    NavTwoScreenOne: {screen: NavTwoScreenOne},
    NavTwoScreenTwo: {screen: NavTwoScreenTwo},
    NavTwoScreenThree: {screen: NavTwoScreenThree},
    NavTwoScreenFour: {screen: NavTwoScreenFour}
  },
  {
    headerMode: 'float',
    navigationOptions: {},
    defaultNavigationOptions: {
      header: <Header />,
      gesturesEnabled: false,
    },
  }
);

export default createAppContainer(
  createSwitchNavigator(
    {
      App: NavigatorOne,
      Visits: NavigatorTwo,
      Login: PageLogin,
    },
    {
      initialRouteName: 'Login',
      backBehavior: 'none',
    }
  )
);

然后我有一个 AppNavigatorContainer，就像这个：

const AppNavigatorContainer = ({ setNavigator }: { setNavigator: (n: NavigationContainerComponent) => void }) => {
  const dispatch = useDispatch();

  return (
    <AppNavigator
      ref={(navigatorRef) => {
        NavigationService.setTopLevelNavigator(navigatorRef);
        setNavigator(navigatorRef);
      }}
      onNavigationStateChange={(_prevState, currentState) => dispatch(setCurrentRoute(NavigationService.getActiveRouteName(currentState)))}
    />
  );
};

和这样的应用程序文件：

  const [navigator, setNavigator] = useState(null);
  return (
    <Provider store={ReduxConf.store}>
      <PersistGate loading={null} persistor={ReduxConf.persistor}>
        <ReduxNetworkProvider pingInterval={20000}>
          <Root>
            <StyledView>
              <StatusBar hidden />
              <Header />
              <AppNavigatorContainer setNavigator={setNavigator} />
              <Toolbar />
              <Menu />
              ...
            </StyledView>
            ...
          </Root>
        </ReduxNetworkProvider>
      </PersistGate>
    </Provider>
  );

所以基本上它将对 AppNavigator 的引用保存在全局文件 (NavigationService) 中，以便可以在任何地方访问它，包括未嵌套在 AppNavigatorContainer 中的菜单和工具栏。工具栏是设置在屏幕底部的工具栏，它根据您是在第一个堆栈还是第二个堆栈中更改按钮。

正如我所看到的，工具栏应该使用 StackNavigator 中的两个 TabNavigators（每个都有一组按钮/选项卡）构建，并且 Menu 应该是 DrawerNavigator（不知道反应导航的版本 3 中是否有这些堆栈），并且应该嵌套在 SwitchNavigator 中（在版本 6 中没有 Switch，但概念保持不变）。

这是一个写得很糟糕的导航结构吗？感觉它打破了很多好的编码规则……（目前的项目结构）

4

0 回答 0