反应本机选项卡导航模式选项

Question

我按以下方式设置了我的 React 选项卡导航：

export default MainStackScreens = () => {
  const MainStack = createBottomTabNavigator();

  const screenOptions = ({ route }) => ({
    tabBarShowLabel: false,
    tabBarIcon: ({ focused }) => {
      let iconName = 'home';

      switch (route.name) {
        case 'Home':
          iconName = 'home';
          break;
        case 'Favorite':
          iconName = 'heart';
          break;
        case 'Filter':
          iconName = 'filter';
          break;
        case 'Profile':
          iconName = 'user';
          break;

        default:
          iconName = 'home';
      }

      if (route.name === 'Post') {
        return <AntDesign name='pluscircle' size={42} color={colors.green} />;
      }
      return (
        <FontAwesome
          name={iconName}
          size={30}
          color={focused ? '#1f2833' : '#cacaca'}
        />
      );
    },
  });

  return (
    <MainStack.Navigator screenOptions={screenOptions}>
      <MainStack.Screen name='Home' component={HomeScreen} />
      <MainStack.Screen name='Favorite' component={FavoriteScreen} />
      <MainStack.Screen name='Post' component={PostScreen} />
      <MainStack.Screen name='Filter' component={FilterScreen} />
      <MainStack.Screen name='Profile' component={ProfileScreen} />
    </MainStack.Navigator>
  );
};

有没有一种方法可以修改此代码，使“Post”路由作为模式而不只是普通屏幕出现？我已经尝试了一些我在网上找到的东西，包括将堆栈分成单独的堆栈组并摆弄屏幕选项，但到目前为止我所做的似乎没有任何效果:(

谢谢！

Answer 1

所以在一些帮助下我弄明白了，它需要一些非常奇怪的工作来解决使用 listners prop 的问题：

return (
    <MainStack.Navigator screenOptions={screenOptions}>
      <MainStack.Screen name='Home' component={HomeScreen} />
      <MainStack.Screen name='Favorites' component={FavoriteScreen} />
      <MainStack.Screen
        name='Add'
        component={PostTab}
        listeners={({ navigation }) => ({
          tabPress: (event) => {
            event.preventDefault();
            navigation.navigate('AddModal');
          },
        })}
      />
      <MainStack.Screen name='Search' component={FilterScreen} />
      <MainStack.Screen name='Profile' component={ProfileScreen} />
    </MainStack.Navigator>
  );
};