Реагировать навигатор 5; Навигатор вкладок и навигатор стека

Я очень новичок в React/React Native...

Я работаю с React Navigator 5. У меня есть навигация по вкладкам на главном экране, и я хочу создать навигацию по стеку (с новыми экранами вне контейнера навигации по вкладкам) для двух «вкладок» в структуре навигации по вкладкам. Это то, что называется «вложенной навигацией»?

Спасибо

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

Ответы 1

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

Создайте контейнер Root Stack и вкладку Container. Если вы хотите показать вкладки в контейнере стека, укажите компонент как вкладку Контейнер.

Например. :

import React from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const MyTabs = () => {
  const Navigation = () => (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name = "Login" component = {Login} />
        <Stack.Screen name = "Home" component = {BottomNav} />
        <Stack.Screen name = "Profile" component = {Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
  
  const BottomNav = () => (
    <Tab.Navigator>
      <Tab.Screen name = "Streams" component = {Streams} />
      <Tab.Screen name = "Tweets" component = {Tweets} />
      <Tab.Screen name = "Reported" component = {Reported} />
      <Tab.Screen name = "Leaderboard" component = {Leaderboard} />
    </Tab.Navigator>
  );

  return <Navigation />
}


export default MyTabs;

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