反应导航器 5；选项卡导航器和堆栈导航器

Question

我对 React/React Native 很陌生...

我正在使用 React Navigator 5。我在主屏幕上有选项卡导航，我想为选项卡导航结构中的两个“选项卡”创建堆栈导航（在选项卡导航容器外有新屏幕）。
这就是所谓的“嵌套导航”吗？

谢谢

Answer 1

创建根堆栈容器和选项卡容器。如果你想在堆栈容器中显示选项卡，请将组件作为选项卡容器。

例如:

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;

反应导航器 5；选项卡导航器和堆栈导航器

React Navigator 5; Tab Navigator and Stack Navigator

reactjs

react-native

react-navigation-v5