结合 createStackNavigator 和 createBottomTabNavigator?
Posted
技术标签:
【中文标题】结合 createStackNavigator 和 createBottomTabNavigator?【英文标题】:Combine createStackNavigator and createBottomTabNavigator? 【发布时间】:2019-01-30 09:28:19 【问题描述】:场景:
我有一个应用程序使用三个选项卡进行导航(学校、管理、家庭); 我现在正在尝试添加其他屏幕,它们不会有相应的选项卡。这些屏幕将被导航到使用类似 this.props.navigation.navigate('ChatScreen')问题 - 使用我过去的解决方案,每当我添加一个屏幕时,它都会为该屏幕添加一个选项卡。
待办事项:
我希望在我的导航堆栈中包含选项卡,以及其他正常(非选项卡)屏幕。
我希望标签和标题都保持不变我没有成功将两者结合起来,并且尝试了很多 以下代码的变体。
试用代码:
const School = createStackNavigator(
School:
screen: SchoolScreen,
navigationOptions:
headerTitle: <CustomHeaderTitle screen='school'/>
);
const Admin = createStackNavigator(
Admin:
screen: AdminScreen,
navigationOptions:
headerTitle: <CustomHeaderTitle screen='admin' />
);
const Family = createStackNavigator(
Family:
screen: FamilyScreen,
navigationOptions:
headerLeft: null,
headerTitle: <CustomHeaderTitle screen='family' />
);
const ChatStack = createStackNavigator(
CreateChat: CreateChatScreen
);
const TabStack = createBottomTabNavigator(
School: School,
Admin: Admin,
Family: Family
,
navigationOptions: ( navigation ) => (
tabBarIcon: () =>
const routeName = navigation.state;
return <Image id=1 source=require('./app/img/school_logo.png') />
,
tabBarLabel: navigation.state.routeName
),
tabBarOptions:
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
style:
backgroundColor: 'black',
height: 55
);
const RootStack = createStackNavigator(
Root: ChatStack,
Tabs: TabStack
)
export default class App extends Component
render() return (
<Provider store=store>
<RootStack />
</Provider>
);
抱歉,经过一段时间的处理,我无法格式化此代码。
感谢您提前提供任何帮助或建议! 请提出建议。
【问题讨论】:
【参考方案1】:感谢未命名的redditor:
您必须将整个堆栈嵌套到选项卡导航器的每个屏幕中。据我所知,如果 StackNavigator 嵌套在不同的 TabNavigator 屏幕中,您将无法访问它们中的不同屏幕。
例如,如果您希望能够从 SchoolScreen 导航到聊天屏幕,则必须将该组件包含在 School 导航器中。
const School = createStackNavigation(
School:
screen: SchoolScreen
,
SchoolChat:
screen: CreateChatScreen
);
从那里你的主 TabNavigator 应该看起来差不多
const TabStack = createBottomTabNavigator(
School: School
);
【讨论】:
当我返回定义的tabnavigatior(页脚)时,我不会出现。【参考方案2】:当 TabStack 获得焦点时,您应该隐藏 RootStack 标题
TabStack.navigationOptions =
// Hide the header from root stack
header: null,
;
并且您不需要将堆栈添加到 CreateChatScreen
const RootStack = createStackNavigator(
Tabs: TabStack,
ChatScreen: CreateChatScreen,
)
【讨论】:
您好,可能是我发帖的初衷有误。我的目标不是在导航到另一个屏幕时隐藏选项卡。我希望标签保持不变,就像它们目前一样,但我也希望能够使用类似 this.props.navigation.navigate('ChatScreen') 的东西导航到其他“非标签”屏幕。使用您的解决方案,我现在只看到一个没有选项卡的创建聊天屏幕。感谢您迄今为止的帮助! 可能我写的有点不对,TabStack需要放在前面,已经更正了。【参考方案3】:在反应原生导航5
import React from 'react';
import Text from 'react-native';
import createStackNavigator from '@react-navigation/stack';
import NavigationContainer from '@react-navigation/native';
import createBottomTabNavigator from '@react-navigation/bottom-tabs';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function Scr()
return <Text>hello</Text>;
function MyTabs()
return (
<Tab.Navigator
initialRouteName="Expolre"
tabBarOptions=
activeTintColor: '#414757',
>
<Tab.Screen name="Expolre" component=Scr />
</Tab.Navigator>
);
export default function Routing()
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="login"
component=Scr
options=header: () => null
/>
<Stack.Screen
name="dashboard"
component=MyTabs
options=header: () => null
/>
</Stack.Navigator>
</NavigationContainer>
);
【讨论】:
以上是关于结合 createStackNavigator 和 createBottomTabNavigator?的主要内容,如果未能解决你的问题,请参考以下文章