React 本机选项卡导航模式选项答案

【问题标题】：React native tab navigation modal optionsReact 本机选项卡导航模式选项
【发布时间】：2021-10-02 07:13:51
【问题描述】：

我的 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>
  );
};

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

谢谢！

【问题讨论】：

而不是声明MainStack.Screen name='Post'，为什么不从一开始就将其用作Modal（使用react-native-modal或等价物？）
我尝试过类似的方法，但因为我使用的是底部标签导航器，所以无法使用该选项

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

所以在一些帮助下我弄明白了，它需要使用 listners 属性进行一些非常奇怪的工作：

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>
  );
};

【讨论】：