Как использовать два Const в createAppContainer в React native - PullRequest
Новая
       42

Как использовать два Const в createAppContainer в React native

1 голос
/ 24 мая 2019

Я пытаюсь использовать два Const в createAppContainer, но это не позволяет мне сделать это, поэтому я должен использовать createBottomTabNavigator и createStackNavigator оба в app.js. вот мой код 

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, но я не могу использовать оба одновременно, может кто-нибудь, пожалуйста, помогите мне в этом.

1 Ответ

0 голосов
/ 24 мая 2019

ваш MainNavigator должен войти внутрь RootStack, т. Е. Должна быть только корневая навигация 

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

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

const App = createAppContainer(RootNavigation);

export default App;
...