Как использовать стековую навигацию с навигатором нижней вкладки с помощью React navigation 5.X - PullRequest
Новая
       80

Как использовать стековую навигацию с навигатором нижней вкладки с помощью React navigation 5.X

0 голосов
/ 14 апреля 2020

Я обновляю свой код, чтобы использовать response-navigation 5.x, но я не знаю, как реализовать стековую навигацию с помощью навигатора нижней вкладки в этой версии. Я использую нижнюю вкладку навигатора только на экранах, которые появляются после входа пользователя в систему. На первом экране есть только навигация с пользовательскими кнопками. Моя проблема в том, что я не знаю, как создать путь к той необходимости, которая у меня есть. Я искал пример кода, но я нашел только коды, которые используют только навигатор нижней вкладки. Не могли бы вы дать мне пример кода, который я могу использовать? Я был бы признателен

У меня есть этот кусок кода, который я сейчас и работаю 

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'

const AuthStack = createStackNavigator();

const AuthStackScreen = () => (
    <NavigationContainer>
        <AuthStack.Navigator 
        initialRouteName="Login" 
        screenOptions={{
            headerShown: false
        }}>
            <AuthStack.Screen
            name="Login"
            component={Login}
            />
            <AuthStack.Screen
            name="Register"
            component={Register}
            />
        </AuthStack.Navigator>
    </NavigationContainer>
);

export default AuthStackScreen

1 Ответ

0 голосов
/ 14 апреля 2020

вы можете сделать что-то вроде этого: 

export default function ComponentC() {
    return(
        <View>
            <Text>It Works!</Text>
        </View>
    )
}

export default function ComponentB() {
  return (
    <Stack.Navigator initialRouteName={'Main'}>
        <Stack.Screen name={'Main'} component={ComponentC} />
    </Stack.Navigator>   
  );
} 

export default function ComponentA () {
    return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName={'ComponentB'}
        >
          <Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
              <FontAwesome5 color={color}  name={'check-square'} size={20}/>
          )}} />
        </Tab.Navigator>
      </NavigationContainer>    
    );
  }

Компонент B будет вызываться в Навигаторе с нижней вкладкой, а начальный маршрут будет Компонентом C.

...