#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. редактирование вопроса выполнено