Фон
Довольно простой вопрос, на самом деле, я разработал навигатор нижней вкладки для своего приложения, который показывает только 5 значков/кнопок. Мне нужно, чтобы навигация показывалась почти на каждом экране.
Проблема
Это моя структура приложения:
<NavigationContainer>
<Stack.Navigator initialRouteName = {user ? 'Home' : 'Login'}
screenOptions = {{cardStyle: { backgroundColor: '#FFFFFF' }}}>
<Stack.Screen name = "Home"options = {{headerShown: false}}>
{props => <TabNav {...props} extraData = {user} />}
</Stack.Screen>
<Stack.Screen name = "Login" component = {LoginScreen} options = {{headerShown: false}}/>
<Stack.Screen name = "RegistrationMethod" component = {RegistrationMethod} options = {{headerShown: false}}/>
<Stack.Screen name = "TermsScreen" component = {TermsScreen} options = {{headerShown: false}}/>
<Stack.Screen name = "Registration" component = {RegistrationScreen} options = {{headerShown: false}}/>
<Stack.Screen name = "Detail" options = {{title: ''}} component = {BarDetail}/>
<Stack.Screen name = "Profile" options = {{headerShown: false}}>
{props => <ProfileScreen {...props} extraData = {user} />}
</Stack.Screen>
<Stack.Screen name = "personalDetails" options = {{title: 'Perfil'}}>
{props => <PersonalDetails {...props} extraData = {user} />}
</Stack.Screen>
<Stack.Screen name = "config" component = {ConfigScreen} options = {{title:'Configuración'}}/>
<Stack.Screen name = "menu" component = {MenuScreen} options = {{headerShown: false}}/>
<Stack.Screen name = "checkoutStart" component = {checkoutStart} options = {{title: 'Tu compra'}}/>
<Stack.Screen name = "checkoutII" component = {checkoutII} options = {{title: 'Tu compra'}}/>
<Stack.Screen name = "reviewScreen" component = {ReviewScreen} options = {{title: 'Tu opinión'}}/>
<Stack.Screen name = "searchScreen" component = {TabNav} options = {{headerShown: false}}/>
</Stack.Navigator>
</NavigationContainer>
<Tab.Navigator initialRouteName = {user ? 'Home' : 'Login'} tabBarOptions = {{showLabel: false}}
screenOptions = {{showLabel: false, cardStyle: { backgroundColor: '#FFFFFF' }}} sceneContainerStyle = {{backgroundColor: 'white'}}>
<Tab.Screen name = "Home" options = {{
tabBarIcon: ({size,focused,color}) => {
if (focused) {
return (
<SelectedHome/>)
} else {
return (
<LinearHome/>)
}
;},}}
>
{props => <HomeScreen {...props} extraData = {user} />}
</Tab.Screen>
<Tab.Screen name = "Fav" component = {FavScreen} options = {{
tabBarIcon: ({size,focused,color}) => {
return (
<LinearFav/>)
;},}}
/>
<Tab.Screen name = "Search" component = {SearchScreen} options = {{
tabBarIcon: ({size,focused,color}) => {
if (focused) {
return (
<SelectedSearch/>)
} else {
return (
<LinearSearch/>)
}
;},}}/>
<Tab.Screen name = "Notifications" component = {NotificationsScreen} options = {{
tabBarIcon: ({size,focused,color}) => {
if (focused) {
return (
<SelectedNotifications/>)
} else {
return (
<LinearNotifications/>)
}
;},}}/>
<Tab.Screen name = "HelpScreen" component = {HelpScreen} options = {{
tabBarIcon: ({size,focused,color}) => {
if (focused) {
return (
<SelectedHelp/>)
} else {
return (
<LinearHelp/>)
}
;},}}/>
</Tab.Navigator>
Поэтому мне нужен навигатор вкладок, поскольку он должен отображаться на большинстве экранов из навигатора стека. Я думал изменить его, сделать все вкладки и стопки, но не вызовет ли это беспорядок, а также покажет каждый экран в нижнем колонтитуле как сенсорный?
Вопрос
Как я могу сохранить навигатор вкладок только с этими значками на каждом другом экране? (Обратите внимание, что решение должно учитывать, что оно должно быть скрыто на некоторых определенных экранах.)
Если вы хотите отобразить навигатор нижней вкладки на определенных экранах, вам следует поместить эти экраны в <Stack.Navigator />
, а <Stack.Navigator />
— внутрь <Tab.Navigator />
.
Подробнее здесь: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
Круто, я проверю это. Если я решу свою проблему с этим документом, я приму ваш ответ.