如何在 React Native 中的 createAppContainer 中使用两个 Const

Question

我试图在createAppContainer 中使用两个常量，但它不允许我这样做，所以我必须在app.js 中同时使用createBottomTabNavigator 和createStackNavigator。这是我的代码

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;

在上面的代码中，我有两个 const RootStack 和 MainNavigator，但我不能同时使用两者，谁能帮我解决这个问题。

Answer 1

你的MainNavigator 应该在RootStack 里面，即应该只有根导航

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

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

const App = createAppContainer(RootNavigation);

export default App;