React Navigation 5 处理模态、底部选项卡和堆栈答案

【问题标题】：React Navigation 5 Handling Modals, Bottom Tabs, and StacksReact Navigation 5 处理模态、底部选项卡和堆栈
【发布时间】：2021-09-11 00:30:49
【问题描述】：

当我想组合堆栈导航器、底部选项卡和模式时，您如何处理不同的导航？现在，一切正常，但问题是我只希望特定链接成为模式，相反，添加 mode: 'modal' 将使所有内容成为模式。

App.js：

<NavigationContainer>
  <RootStack />
</NavigationContainer>

根栈：

<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Register" component={RegisterScreen} />
  <Stack.Screen name="Home" component={BottomTabs} />
</Stack.Navigator>

底部标签：

<Tab.Navigator mode="modal">
  <Tab.Screen
    name={'Home'}
    component={ExploreStack}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
  />
  <Tab.Screen
    name={'Post'}
    component={PostScreen}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
    listeners={({navigation}) => ({
      tabPress: event => {
        event.preventDefault();
        navigation.navigate('PostStack');
      },
    })}
  />
</Tab.Navigator>

探索堆栈：

<Stack.Navigator
  mode="modal"
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="Explore" component={ExploreScreen} />
  <Stack.Screen name="Modal" component={ModalStack} />
  <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
  <Stack.Screen
    name="PostStack"
    component={PostStack}
    options={{
      gestureEnabled: false,
    }}
  />
  <Stack.Screen
    name="LocationStack"
    component={LocationStack}
    headerMode="none"
    options={{
      headerMode: 'screen',
      ...TransitionPresets.ModalPresentationIOS,
    }}
  />
</Stack.Navigator>

所以我想做的是使 ExploreStack 中的 LocationStack 成为模态，并保留 ProductDetail 作为常规导航堆栈（不是模式）。

所以我的 ExploreStack 中的所有内容都变成了模式。

【问题讨论】：

标签： react-native react-navigation react-navigation-v5 react-navigation-stack react-navigation-bottom-tab

【解决方案1】：

我已经找到了自己的解决方案。我必须将所有我不希望作为模式的堆栈移动到根堆栈中，这将允许我导航到应用程序中的任何位置的堆栈名称。

编辑：

我发现的另一种方法是使用useLayouteffect 来源：React Navigation how to hide tabbar from inside stack navigation

【讨论】：

【解决方案2】：

有官方文档here。

模态框就像一个弹出窗口——它不是主要导航流程的一部分——它通常具有不同的过渡、不同的关闭方式，并且旨在专注于特定的内容或交互。

通常，您应该将模态屏幕放在主堆栈之外。您也可以自定义模态转换，但这很复杂。这里是a blog 介绍这个。

【讨论】：

【解决方案3】：

在 Rootstock 中将模态添加为单独的组件。在这里，您在模态和砧木组件中都使用了堆栈导航器。这会很有帮助https://reactnavigation.org/docs/getting-started/

【讨论】：