结合 createStackNavigator 和 createBottomTabNavigator？答案

【问题标题】：Combine createStackNavigator and createBottomTabNavigator?结合 createStackNavigator 和 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>
    );
  }
}

抱歉，经过一段时间的处理，我无法格式化此代码。

感谢您提前提供任何帮助或建议！
请提出建议。

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation

【解决方案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>
  );
}

【讨论】：