Отображение навигатора нижней вкладки на каждом отдельном экране

Фон

Довольно простой вопрос, на самом деле, я разработал навигатор нижней вкладки для своего приложения, который показывает только 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>

Поэтому мне нужен навигатор вкладок, поскольку он должен отображаться на большинстве экранов из навигатора стека. Я думал изменить его, сделать все вкладки и стопки, но не вызовет ли это беспорядок, а также покажет каждый экран в нижнем колонтитуле как сенсорный?

Вопрос

Как я могу сохранить навигатор вкладок только с этими значками на каждом другом экране? (Обратите внимание, что решение должно учитывать, что оно должно быть скрыто на некоторых определенных экранах.)

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
4 103
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите отобразить навигатор нижней вкладки на определенных экранах, вам следует поместить эти экраны в <Stack.Navigator />, а <Stack.Navigator /> — внутрь <Tab.Navigator />.

Подробнее здесь: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

Круто, я проверю это. Если я решу свою проблему с этим документом, я приму ваш ответ.

lwisi 23.12.2020 17:12

Другие вопросы по теме