reactjs - React Navigator 5; Tab Navigator and Stack Navigator
问题描述
I am very new to React/React Native...
I am working with React Navigator 5. I have Tab Navigation on Home Screen and I want to create Stack Navigation (with new screens outside Tab Navigation container) for two "tabs" in the Tab Navigation structure.
Is this what's termed "nested navigation"?
Thanks
解决方案
创建根堆栈容器和选项卡容器。如果要在堆栈容器中显示选项卡,请将组件作为选项卡容器。
例如:
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;
推荐阅读
- c# - 如果 ViewModel 中只有一个属性,真的有必要吗?
- android - 重新初始化 Hilt 生成的类
- amazon-web-services - AWS ElasticSearch 服务和数据流
- c++ - 函数中参数数组的大小
- c# - 异常:ObjectContext 实例已被释放,不能再用于需要连接的操作
- javascript - 聊天系统的最佳缓存
- python - 尝试从 yfinance Ticker 对象获取日期时出现 Python 错误
- c# - Selenium Chrome 驱动程序在页面上查找文本
- c - 我的简单 C 程序没有按预期工作,我该如何解决?
- c - OpenGL移动四边形