如何在两个不同的堆栈导航器屏幕中传递一个组件，而不让这两个屏幕变成同一个东西

Question

在这种情况下，我们假设：

<Stack.Screen name="Home" component={BottomTab}
options = {{title:'Home', headerShown: false}}
/>


<Stack.Screen name = 'Create' component={BottomTab}
options = {{title:'Create'}}

现在的问题是"创建"；屏幕包含与"；主页"；屏幕，因为它们都有相同的BottomTab组件。那么，我如何在两个屏幕中都有相同的BottomTabNavigator，而不让它们变成同一个东西呢？注意：这些堆栈。屏幕都在同一个Stack Navigator和同一个NavigationContainer中(如果相关的话(。

我的BottomTab组件的代码：

function BottomTab() {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
labelStyle: {fontSize:18},
activeTintColor: 'green',
tabBarVisible:false,
tabBarShowLabel: false,
}}
>

<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "home" : "home-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>
)
}}
/>

<Tab.Screen
name="Search"
component={Search} 
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "search" : "search-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>          
)
}} 
/>

<Tab.Screen
name="Topic"
component={EmptyScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableHighlight onPress={() => console.log('HHH')} underlayColor="white" activeOpacity={1}>
<View 
style={{
width: 80,
height: 80,
backgroundColor: 'white',
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
}}>
<AddButton/>
</View>
</TouchableHighlight>
)
}}  
/>

<Tab.Screen
name="Notification"
component={Notification}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "notifications" : "notifications-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>          
)
}}  
/>

<Tab.Screen
name="Message"
component={Message}
options={{
tabBarIcon: ({ focused }) => (
<Ionicons
name={focused ? "mail" : "mail-outline"}
size={20}
color = {focused ? "black" : "#748c94"}
type={'Ionicons'}
/>          
)
}}  
/>
</Tab.Navigator>  
);
}

Answer 1

我认为您应该避免将BottomTabNavigator组件传递到两个屏幕，而是使用一个"主"屏幕来放置选项卡导航器，如下所示：

import React from 'react';
import TabNavigator from '../navigators/TabNavigator';
const HomeScreen = ({}) => {
return <TabNavigator />;
};
export default HomeScreen;