反应导航和 BottomTabs 中额外选项卡的“更多”叠加 - 如何操作？

Question

在我的应用程序中，我使用

react-navigation

(v5) 并在所有主屏幕上使用

BottomTabNavigator

。

我想确保其他选项卡（超过 5 个）隐藏在一个特殊的“更多”选项卡中，该选项卡打开屏幕列表 - 从那里，它们的行为应该像普通选项卡一样，但仅在“更多”选项卡时显示选项卡已激活。

这是设计师的想象。 （忽略红色计数器）

如何使用

react-navigation

的选项实现类似的功能，而无需太多自定义代码或外部依赖项？

Answer 1

我遇到你的问题是因为我面临着同样的问题。我已经成功做到了，但我对我的解决方案不满意。由于一段时间没有其他答案，您找到更好的解决方案了吗？

我的方法是在单击选项卡栏时阻止屏幕打开，而是打开菜单。以下是实现这一目标的方法：

function GeneralTabs() {
  const [isMenuVisible, setIsMenuVisible] = useState(false)
  return(
  <>
    <Tab.Navigator
    screenOptions={{ headerShown: false }}
    initialRouteName="Myheder"
    >
    //other Tab.Screens
    <Tab.Screen
      name="More"
      component={() => null}
      listeners={() => ({
        tabPress: (e) => {
          e.preventDefault()
          setIsMenuVisible(true)
        }
      })}
      options={{
        tabBarIcon: ({ color, size }) => {
          return(
            <MaterialIcons name="more-horiz" color={color} size={size}/>
          )
        }
      }}
    />

    <Menu
      visible={isMenuVisible}
      onDismiss={() => setIsMenuVisible(false)}
      anchor={{x: 0, y: 0}}
    >
      <Menu.Item leadingIcon="account-circle" onPress={() => {/* navigation to my account */}} title="My account" />
      <Menu.Item leadingIcon="tune" onPress={() => {/* navigation to settings */}} title="Settings" />
    </Menu>
  </>
)