нижние вкладки не на всех экранах, несмотря на то, что они вложены

#react-native #expo

Вопрос:

 export default function Navigation({ colorScheme }: { colorScheme:  ColorSchemeName }) {   return (   lt;NavigationContainer   linking= {LinkingConfiguration}   theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}gt;   lt;RootNavigator /gt;  lt;/NavigationContainergt; ); }   function RootNavigator() {  return (  lt;Stack.Navigator screenOptions={{  headerShown: false}}  gt;  lt;Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false   }} /gt;  lt;Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }}   /gt;  lt;Stack.Group screenOptions={{ presentation: 'fullScreenModal' }}gt;  lt;Stack.Screen name="Modal" component={ModalScreen} /gt;  lt;Stack.Screen name="Paywall1" component={Paywall1Screen} /gt;  lt;Stack.Screen name="Paywall" component={PaywallScreen} /gt;  lt;Stack.Screen name="WelcomeScreen" component={WelcomeScreen} /gt;  lt;/Stack.Groupgt;  lt;/Stack.Navigatorgt;  ); } const BottomTab = createBottomTabNavigatorlt;RootTabParamListgt;();  function BottomTabNavigator() { const colorScheme = useColorScheme();  return ( lt;BottomTab.Navigator  initialRouteName="HomeScreen"  screenOptions={{  headerShown: false,  tabBarActiveTintColor: Colors[colorScheme].tint,  }}gt;  lt;BottomTab.Screen  name="HomeScreen"  component={HomeScreen}  options={{  tabBarLabel: 'Today',  tabBarIcon: ({ color }) =gt; lt;TabBarIcon name="home" color=   {color} /gt;,  }}  /gt;  lt;BottomTab.Screen  name="Episodes"  component={EpisodesScreen}  options={{  title: 'Episodes',  tabBarIcon: ({ color }) =gt; lt;TabBarFeatherIcon   name="headphones" color={color} /gt;,  }}  /gt;  lt;BottomTab.Screen  name="TabThree"  component={TabThreeScreen}  options={{  title: 'Guides',  tabBarIcon: ({ color }) =gt; lt;TabBarFeatherIcon name="bookmark" color={color} /gt;,  }}  /gt;  lt;BottomTab.Screen  name="CommunityScreen"  component={CommunityScreen}  options={{  title: 'Community',  tabBarIcon: ({ color }) =gt; lt;TabBarIcon name="users" color=   {color} /gt;,  }}  /gt;  lt;BottomTab.Screen  name="ProfileScreen"  component={ProfileScreen}  options={{  title: 'Profile',  tabBarIcon: ({ color }) =gt; lt;TabBarIcon name="user" color=  {color} /gt;,  }}  /gt; lt;/BottomTab.Navigatorgt;  ); }  

Использование EXPO версии 43.0.1 с react-навигацией/ядром 6.1.0 react-навигация/нижние вкладки 6.0.9

Мне нужно, чтобы bottomTabNavigator отображался на всех экранах, а не только на 5, которые я перечислил в своем bottomTabNavigator. ничто здесь, похоже, не помогает в этом, как раз наоборот, чтобы держать их подальше от экранов, на которых пользователь их не хочет видеть.

Например, если я нахожусь на своем экране платежной системы, я не вижу своих нижних таблиц (этот маршрут не включен в навигатор нижних таблиц).

Комментарии:

1. Как выглядит весь компонент? Какая версия навигации React?

Ответ №1:

В текущий момент в своем вопросе вы не указываете, какая версия или весь файл для компонента RootNavigator . На первый взгляд, если вы используете навигацию React 6, ей нужна NavigationContainer , и я не вижу этого в вашем вопросе, например, с NavigationContainer :

 import { NavigationContainer } from '@react-navigation/native' import { createNativeStackNavigator } from '@react-navigation/native-stack'  const Stack = createNativeStackNavigator()  const RootNavigator = () =gt; {  return (  lt;NavigationContainergt;  lt;Stack.Navigator  screenOptions={{  headerShown: false,  }}  gt;  lt;Stack.Screen name='Root' component={BottomTabNavigator} options={{ headerShown: false }} /gt;  lt;Stack.Screen name='NotFound' component={NotFoundScreen} options={{ title: 'Oops!' }} /gt;  lt;Stack.Group screenOptions={{ presentation: 'fullScreenModal' }}gt;  lt;Stack.Screen name='Modal' component={ModalScreen} /gt;  lt;Stack.Screen name='Paywall1' component={Paywall1Screen} /gt;  lt;Stack.Screen name='Paywall' component={PaywallScreen} /gt;  lt;Stack.Screen name='WelcomeScreen' component={WelcomeScreen} /gt;  lt;/Stack.Groupgt;  lt;/Stack.Navigatorgt;  lt;/NavigationContainergt;  ) }  export default RootNavigator  

Комментарии:

1. использование EXPO с предварительно встроенной навигацией

2. экспорт навигации по функциям по умолчанию({ Цветовая схема }: { Цветовая схема: Имя цвета }) { возврат ( Темная тема : тема по умолчанию}gt; gt;lt;Рутнавигатор /gt; lt;Рутнавигатор /gt;lt;/Навигационный контейнерgt; ); }

3. не включайте это в качестве комментария, внесите правку в свой вопрос.

4. редактирование вопроса выполнено