How to use two Const in createAppContainer in React native

问题

I am trying to use two Const in createAppContainer but it dose not allow me to do so i have to use createBottomTabNavigator and createStackNavigator both in app.js. here is my code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator, createAppContainer , createBottomTabNavigator} from 'react-navigation'; 
import { DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AntIcon from "react-native-vector-icons/AntDesign";
import home from './src/Home/home';
import EmployerLayout from './src/Home/EmployerLayout';
import Employers from './src/CompleteEmployers/Employers';
import Jobs from './src/CompleteJobs/Jobs';
import Freelancers from './src/CompleteFreelancers/Freelancers';
import Profile from './src/ProfileSetting/Profile'; 
import DetailFreelancerScreen from './src/DetailFreelancer/DetailFreelancerScreen';
import DetailJobScreen from './src/DetailJobs/DetailJobScreen';
import DetailCompanyScreen from './src/DetailCompany/DetailCompanyScreen';
import SearchScreen from './src/DetailSearch/SearchScreen';
console.disableYellowBox = true;
const RootStack= createStackNavigator({
  home:home,
  Profile:Profile,
  Employers:Employers,
  Jobs:Jobs,
  DetailFreelancerScreen:DetailFreelancerScreen,
  DetailJobScreen:DetailJobScreen,
  DetailCompanyScreen:DetailCompanyScreen,
  SearchScreen:SearchScreen,
  EmployerLayout:EmployerLayout,
})

const MainNavigator = createBottomTabNavigator({
  // MainNavigator: MainDrawer},{
  Home:{
    screen: home,
    navigationOptions:{
      tabBarLabel:'Home',  
      tabBarIcon:({tintColor})=>(
        <AntIcon name="home" color={tintColor} size={25} />
      )
    }
  },
  Jobs:{
    screen: Jobs,
    navigationOptions:{
      tabBarLabel:'Jobs',  
      tabBarIcon:({tintColor})=>(
        <AntIcon name="appstore-o" color={tintColor} size={25} />
      )
    }
  },
  Freelancers:{
    screen: Freelancers,
    navigationOptions:{
      tabBarLabel:'Freelancers',  
      tabBarIcon:({tintColor})=>(
        <AntIcon name="user" color={tintColor} size={25}/>
      )
    }
  },
  Employers:{
    screen: Employers,
    navigationOptions:{
      tabBarLabel:'Employers',  
      tabBarIcon:({tintColor})=>(
        <AntIcon name="wallet" color={tintColor} size={25}/>
      )

    }
  },
  Profile:{
    screen: Profile,
    navigationOptions:{
      tabBarLabel:'Profile',  
      tabBarIcon:({tintColor})=>(
        <AntIcon name="setting" color={tintColor} size={25} />
      )

    }
  }
},
{
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let IconComponent = CONST.IC_HOME;
      if (routeName === CONST.MENU_HOME) {
        IconComponent = focused ? CONST.IC_HOME_SELECTED : CONST.IC_HOME;
      } else if (routeName === CONST.MENU_CALENDAR) {
        IconComponent = focused ? CONST.IC_CALENDAR_SELECTED : CONST.IC_CALENDAR;
      } 
      return IconComponent;
    }
  }),
  tabBarOptions: {
    activeTintColor: '#ff5851',

  },


});

const App = createAppContainer(RootStack);

export default App;

IN the above code i have two const RootStack and MainNavigator but i am not able to use both at a same time can anyone please help me regarding this.

回答1:

your MainNavigator should come inside RootStack, i.e there should be only root navigation

MainNavigator = createBottomTabNavigator(
    {
        Home: home,
        Jobs: Jobs
    },
);

RootStack = createStackNavigator(
    {
        SplashScreen: SplashScreen,
        DrawerNavigation: HomeNavigation
    }
);

const App = createAppContainer(RootNavigation);

export default App;

来源：https://stackoverflow.com/questions/56287258/how-to-use-two-const-in-createappcontainer-in-react-native

标签

react-native

react-native-navigation

appcontainer