结合 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?的主要内容,如果未能解决你的问题,请参考以下文章

CreateStackNavigator中的CreateDrawerNavigator

保持全球化 总是在所有页面上

react native练习

反应导航v2滑动

将套接字传递给组件

如何在反应导航中隐藏标题? [复制]