React Navigation 5 处理模式、底部选项卡和堆栈

Question

当我想组合堆栈导航器、底部选项卡和模式时，您如何处理不同的导航？现在，一切正常，但问题是我只希望特定链接成为模态链接，相反，添加 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>

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

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

Answer 1

有官方文档here。

A modal is like a popup — it's not part of your primary navigation flow — it usually has a different transition, a different way to dismiss it, and is intended to focus on one particular piece of content or interaction.

通常，您应该将模态屏幕放在主堆栈之外。您还可以自定义模态转换，但这非常 complicated.Here 是 a blog 介绍一下。

Answer 2

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

编辑：

我发现的另一种方法是使用 useLayouteffect 来源：

Answer 3

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

React Navigation 5 处理模式、底部选项卡和堆栈

React Navigation 5 Handling Modals, Bottom Tabs, and Stacks

react-native

react-navigation

react-navigation-v5

react-navigation-stack

react-navigation-bottom-tab