React原生选项卡导航模式选项

Question

我有我的反应选项卡导航设置如下方式:

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"Route作为一个模式出现，而不是一个普通的屏幕?我尝试了一些我在网上找到的东西，包括把堆栈分成单独的堆栈组和摆弄屏幕选项，但到目前为止我所做的一切似乎都没有任何效果:(

谢谢!

Answer 1

在一些帮助下，我弄清楚了，它需要一些非常奇怪的工作围绕使用listener 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>
);
};