React Native 底部选项卡导航：如果在当前屏幕上，则从导航器中隐藏选项卡

Question

我还在努力学习react native。我有 4 个屏幕，但只想在我的选项卡导航器上使用 3 个按钮。我想删除或隐藏活动屏幕的选项卡。因此，例如，如果我在主屏幕上，我不希望导航器上的主页选项卡按钮可用，并且只能按下剩余的 3 个选项卡。

我尝试使用状态来跟踪我所在的屏幕并有条件地显示选项卡按钮：

tabBarButton: isHomeScreen ? undefined : (props) => null,

我几乎可以肯定这会起作用，但后来我收到以下错误：

TypeError: false is not a function

以下是我所做的一些片段：

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  const [isHomeScreen, setIsHomeScreen] = useState(true);

  return (
    <Tab.Navigator
      backBehavior="history"
      screenOptions={{
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: { height: 75 },
      }}
    >
      <Tab.Screen
        name="Home"
        children={() => <HomeScreen setIsHomeScreen={setIsHomeScreen} />}
        options={{
          tabBarAccessibilityLabel: "Home",
          tabBarButton: isHomeScreen && ((props) => null),
          tabBarIcon: () => (
            <Image
              style={{
                height: 50,
                width: 50,
              }}
              source={require("../../assets/icons/tab_navigator/home.png")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        children={() => <ProfileScreen setIsHomeScreen={setIsHomeScreen} />}
        options={{
          tabBarAccessibilityLabel: "Profile",
          tabBarButton: isHomeScreen ? undefined : (props) => null,
          tabBarIcon: ({ focused, color, size }) => (
            <Avatar source={dummyData.profileSource} />
          ),
        }}
      />
      <Tab.Screen
        name="CreatePoll"
        children={() => <CreatePollScreen setIsHomeScreen={setIsHomeScreen} />}
        options={{
          tabBarAccessibilityLabel: "Create Poll",
          tabBarIcon: () => (
            <Image
              style={{ height: 50, width: 50 }}
              source={require("../../assets/icons/tab_navigator/create-poll.png")}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        children={() => (
          <NotificationsScreen setIsHomeScreen={setIsHomeScreen} />
        )}
        options={{
          tabBarAccessibilityLabel: "Notifications",
          tabBarBadge: 4, // To Fix: Make dynamic
          tabBarIcon: () => (
            <Image
              style={{ height: 50, width: 50 }}
              source={require("../../assets/icons/tab_navigator/notification.png")}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

在所有屏幕中，我都有以下内容：

const ProfileScreen = ({ setIsHomeScreen }) => {
  const isFocused = useIsFocused();
  if (isFocused) {
    setIsHomeScreen(false);
  }

  return <Text>PROFILE SCREEN</Text>;
};

export default ProfileScreen;

Answer 1

您遇到“TypeError: false is not a function”错误的问题是因为您在定义 Tab.Screen 中的 tabBarButton 选项时使用逻辑 AND 运算符 (&&) 而不是三元运算符 (? :)组件。

要根据活动屏幕有条件地隐藏或显示选项卡按钮，您可以按如下方式修改代码：

<Tab.Screen
  name="Home"
  children={() => <HomeScreen setIsHomeScreen={setIsHomeScreen} />}
  options={({ route }) => ({
    tabBarAccessibilityLabel: "Home",
    tabBarButton: route.name === "Home" ? null : (props) => <TouchableOpacity {...props} />,
    tabBarIcon: () => (
      <Image
        style={{
          height: 50,
          width: 50,
        }}
        source={require("../../assets/icons/tab_navigator/home.png")}
      />
    ),
  })}
/>
<Tab.Screen
  name="Profile"
  children={() => <ProfileScreen setIsHomeScreen={setIsHomeScreen} />}
  options={({ route }) => ({
    tabBarAccessibilityLabel: "Profile",
    tabBarButton: route.name === "Profile" ? null : (props) => <TouchableOpacity 
        {...props} />,
    tabBarIcon: ({ focused, color, size }) => (
      <Avatar source={dummyData.profileSource} />
    ),
  })}
/>

// 对其他 Tab.Screen 组件重复同样的操作