首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React 5;Tab Navigator和Stack Navigator

React 5;Tab Navigator和Stack Navigator
EN

Stack Overflow用户
提问于 2020-12-20 18:07:55
回答 1查看 144关注 0票数 0

我对本地人的反应和反应很陌生.

我正在使用5。我在主屏幕上有Tab导航,我想为Tab导航结构中的两个“选项卡”创建堆栈导航(在Tab导航容器之外有新的屏幕)。

这就是所谓的“嵌套导航”吗?

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-21 08:43:48

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

例如:

代码语言:javascript
运行
复制
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;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65383136

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档