React Navigation - 从选项卡栏打开模式

Question

使用 React Navigation (6)，我将底部选项卡设置为我的主导航器：

export function TabNavigator() {
  const getColor = ({ focused, color }) => (focused ? palette.blue : color)

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="home-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="favourites"
        component={FavouritesScreen}
        options={{
          tabBarLabel: "Favourites",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="heart-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="about"
        component={AboutYouScreen}
        options={{
          tabBarLabel: "About you",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="person-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />

       <Tab.Screen
        name="bottomchat"
        component={ChatNavigator}
        options={{
          tabBarLabel: "Check-in",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

对于最后一个选项卡（ChatNavigator），我希望它打开的屏幕是全屏模式，隐藏底部选项卡栏（如果通过顶部的后退按钮，用户可以退出）。

这可能吗？

Answer 1

当我写这个问题时，我在这篇博文中找到了一个实际上对我有用的答案

解决方案：

1. 在父堆栈中创建全屏模式
2. 将模拟组件传递到选项卡屏幕（这永远不会被调用）
3. 向选项卡组件添加一个侦听器以防止默认，然后导航到您选择的页面

所以对我来说：

const ChatBase = () => <View style={{ flex: 1, backgroundColor: "red" }} />


export function TabNavigator() {
  const getColor = ({ focused, color }) => (focused ? palette.blue : color)

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="home-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="favourites"
        component={FavouritesScreen}
        options={{
          tabBarLabel: "Favourites",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="heart-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="about"
        component={AboutYouScreen}
        options={{
          tabBarLabel: "About you",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="person-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />

      <Tab.Screen
        name="bottomchat"
        /* Pass in a blank component as the base (this never gets shown) */
        component={ChatBase}
        options={{
          tabBarLabel: "Check-in",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
          ),
        }}
        listeners={({ navigation }) => ({
          tabPress: (e) => {
            e.preventDefault()
            navigation.navigate("chat")
          },
        })}
      />
    </Tab.Navigator>
  )
}

在我的根堆栈导航器中，我有一个chat被调用的屏幕：

export function MainNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: { backgroundColor: "transparent" },
        headerShown: false,
      }}
    >
      <Stack.Screen name="main" component={TabNavigator} />
      <Stack.Screen name="chat" component={ChatScreen} />
    </Stack.Navigator>
  )
}