当我写这个问题时,我找到了一个实际上对我有用的答案在这篇博文中 https://www.reactnativeschool.com/master-react-navigation-v5/open-modal-from-tab-bar
解决方案:
- 在父堆栈中创建全屏模式
- 将模拟组件传递到选项卡屏幕(这永远不会被调用)
- 向选项卡组件添加一个侦听器以防止默认,然后导航到您选择的页面
所以对我来说:
const ChatBase = () => <View style={{ flex: 1, backgroundColor: "red" }} />
export function TabNavigator() {
const getColor = ({ focused, color }) => (focused ? palette.blue : color)
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen
name="home"
component={HomeScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ size, ...rest }) => (
<Ionicons name="home-outline" color={getColor(rest)} size={size} />
),
}}
/>
<Tab.Screen
name="favourites"
component={FavouritesScreen}
options={{
tabBarLabel: "Favourites",
tabBarIcon: ({ size, ...rest }) => (
<Ionicons name="heart-outline" color={getColor(rest)} size={size} />
),
}}
/>
<Tab.Screen
name="about"
component={AboutYouScreen}
options={{
tabBarLabel: "About you",
tabBarIcon: ({ size, ...rest }) => (
<Ionicons name="person-outline" color={getColor(rest)} size={size} />
),
}}
/>
<Tab.Screen
name="bottomchat"
/* Pass in a blank component as the base (this never gets shown) */
component={ChatBase}
options={{
tabBarLabel: "Check-in",
tabBarIcon: ({ size, ...rest }) => (
<Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
),
}}
listeners={({ navigation }) => ({
tabPress: (e) => {
e.preventDefault()
navigation.navigate("chat")
},
})}
/>
</Tab.Navigator>
)
}
在我的根堆栈导航器中,我有一个名为chat
被称为:
export function MainNavigator() {
return (
<Stack.Navigator
screenOptions={{
cardStyle: { backgroundColor: "transparent" },
headerShown: false,
}}
>
<Stack.Screen name="main" component={TabNavigator} />
<Stack.Screen name="chat" component={ChatScreen} />
</Stack.Navigator>
)
}