隐藏标签栏从堆栈导航器没有tabBarVisible选项

Question

我找到了一些答案old导航的版本，带有"tabBarVisible">选项卡导航器。但由于没有更多的这个选项，我想知道如何隐藏标签栏在特定的屏幕内堆栈导航器这是我的标签导航器:

<Tab.Navigator
initialRouteName='Passports'
screenOptions={{
"tabBarLabelStyle": {
"fontSize": 12
},
"tabBarStyle": {
"backgroundColor": "white"
}
}}
>
<Tab.Screen
name='EquipmentStack'
component={EquipmentStack}
options={{
tabBarLabel:'Equipment'
}}
/>
<Tab.Screen
name='ObjectsStack'
component={ObjectsStack}
options={{ tabBarLabel:'Objects'}}
/>
<Tab.Screen
name='DocumentationStack'
component={DocumentationStack}
options={{ tabBarLabel:'Documentation'}}
/>
</Tab.Navigator>

和我的第一堆栈导航器:

<Stack.Screen
name='Equipment'
component={Equipment}
options={{headerShown: false}}
/>
<Stack.Screen
name='Equipment Details'
component={EquipmentDetails}
options={{title:'Equipment Details'}}/>
<Stack.Screen
name='Equipment Details Update'
component={EquipmentDetailsUpdate}
options={{title:'Equipment Details Update'}}/>
<Stack.Screen
name='Equipment Details Update Zander'
component={EquipmentDetailsUpdateZander}
options={{title:'Equipment Details Update Zander'}}/>
</Stack.Navigator>

我想隐藏标签栏只在3个屏幕在我的堆栈4:"Equipment"1屏幕:选项卡栏"设备Details"2屏幕:无标签栏设备详细信息更新&;3屏幕:无标签栏设备详细信息更新赞德;4屏幕:无Tab Bar

我的另外2个堆栈导航器是相同的，我也想对它们做同样的事情:

<Stack.Navigator>
<Stack.Screen
name='Objects'
component={Objects}
options={{headerShown: false}}/>
<Stack.Screen
name='Objects Details'
component={ObjectsDetails}/>
<Stack.Screen
name='Objects Details Update'
component={ObjectsDetailsUpdate}/>
</Stack.Navigator>

<Stack.Navigator>
<Stack.Screen
name='Documentation'
component={Documentation}
options={{headerShown: false}}/>
<Stack.Screen
name='Documentation Details'
component={DocumentationDetails}/>
<Stack.Screen
name='Documentation Details Update'
component={DocumentationDetailsUpdate}/>
</Stack.Navigator>

Answer 1

根据我的理解，你想要达到的目标可以这样做。你能检查

export const TabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Passports"
screenOptions={{
tabBarLabelStyle: {
fontSize: 12,
},
tabBarStyle: {
backgroundColor: 'white',
},
}}>
<Tab.Screen
name="Equipment"
component={Equipment}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
<Tab.Screen
name="Objects"
component={Objects}
options={{
tabBarLabel: 'Objects',
headerShown: false,
}}
/>
<Tab.Screen
name="Documentation"
component={Documentation}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
</Tab.Navigator>
);
};
export const StackNavigation = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="TabNavigation"
component={TabNavigation}
options={{headerShown: false}}
/>
<Stack.Screen
name="Equipment Details"
component={EquipmentDetails}
options={{title: 'Equipment Details'}}
/>
<Stack.Screen
name="Equipment Details Update"
component={EquipmentDetailsUpdate}
options={{title: 'Equipment Details Update'}}
/>
<Stack.Screen
name="Equipment Details Update Zander"
component={EquipmentDetailsUpdateZander}
options={{title: 'Equipment Details Update Zander'}}
/>
<Stack.Screen name="Objects Details" component={ObjectsDetails} />
<Stack.Screen
name="Objects Details Update"
component={ObjectsDetailsUpdate}
/>
<Stack.Screen
name="Documentation Details"
component={DocumentationDetails}
/>
<Stack.Screen
name="Documentation Details Update"
component={DocumentationDetailsUpdate}
/>
</Stack.Navigator>
);
};

Answer 2

对于当前版本(v6.x)，您可以使用:tabBarStyle选项将display传递为none:

tabBarStyle: {
display: 'none'
}

，如果您希望再次显示选项栏，只需设置显示为flex(默认值)。