Не удается вложить bottomTabNavigator внутрь DrawerNavigator

Question

Я пытаюсь вложить bottomTabNavigator в DrawerNavigator с помощью библиотеки навигации React, но появляется ошибка, в которой предлагается использовать компонент React или Navigator для маршрута DrawerNavigator.

Это *Файл 1003 *, в котором я создаю DrawerNavigator.

import React, { Component } from 'react';
import {createDrawerNavigator} from 'react-navigation';
import SideBar from '../components/SideBar';
import MainTabNavigator from './MainTabNavigator';

export default createDrawerNavigator({
    Home: {
        screen: MainTabNavigator,
    }
},{
    contentComponent: SideBar
})

Это файл MainTabNavigator.js, в котором я создаю bottomTabBarNavigator

const MainTabNavigator = createBottomTabNavigator({
    Home: HomeStack,
    MultiBar: {
        screen: () => null,
        navigationOptions: ({navigation}) => ({
            tabBarIcon: () => (
                <CustomTabBarBottom />
            )
        }),
        params: {
            navigationDisabled: true
        }
    },
    Video: VideoStack

}, {
  tabBarComponent: props =>
    <TabBarComponent
      {...props}
    />,
    tabBarOptions: {
    showLabel: false,

  },

});


export default MainTabNavigator;

Пожалуйста, посмотрите на это и скажите, если ячто-то упустил, заранее спасибо!

Answer 1

Это мой AppNavigator.js, который используется в качестве основного контейнера приложения:

import React from 'react';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import MainTabNavigator from './MainTabNavigator'
import AuthStackNavigator from './AuthStackNavigator';
import DrawerNavigator from './DrawerNavigator';
const MainAppNavigator = createSwitchNavigator({
    AuthLoadingScreen: AuthLoadingScreen,
    App: DrawerNavigator,
    Auth: AuthStackNavigator,
});

const AppNavigator = createAppContainer(MainAppNavigator)
export default AppNavigator

При удалении импорта MainTabNavigator, который я вообще не использую в файле, ошибка исчезает(что действительно странно).

Answer 2

Не уверен, что это все еще помогает, но у меня возникла та же проблема, и я решил ее, поместив все компоненты в один файл и переместив другие навигаторы вверх, чтобы компонент createDrawerNavigator находился в нижней части файла.Это похоже на подъем не работает здесь?Я на самом деле смущен по этому поводу, но вы идете.

Answer 3

Это мой код bottomTabBar с Drawer.может это вам поможет.

Просто добавьте MainTabNavigation в качестве первого экрана вашего createDrawerNavigator в вашем коде.

Я использовал response-навигационная версия 3.0

import React, { Component } from "react";
import { View, Text } from "react-native";
import {
  createAppContainer,
  createDrawerNavigator,
  createStackNavigator
} from "react-navigation";
import Heal from "./component/tabs/Heal";
import Submit from "./component/tabs/Submit";
import { createBottomTabNavigator, BottomTabBar } from "react-navigation-tabs";
import ProfileSetting from "./component/drawerTabs/ProfileSetting";
import ChangePassword from "./component/drawerTabs/ChangePassword";
import Help from "./component/drawerTabs/Help";
import Logout from "./component/drawerTabs/Logout";
import Drawer from "./component/drawerTabs/Drawer";
import { FontTypes } from "./style/Font";
import { ColorCodes } from "./style/Color";

const TabBarComponent = props => <BottomTabBar {...props} />;
export const TabScreens = createBottomTabNavigator(
  {
    "Heal a case": { screen: Heal },
    "Submit a case": { screen: Submit }
  },
  {
    tabBarComponent: props => (
      // <BottomTabView {...props}/>
      <TabBarComponent
        {...props}
        activeBackgroundColor={ColorCodes.primary}
        showIcon={false}
        allowFontScaling={true}
        activeTintColor="#fff"
        inactiveTintColor="#000"
        labelStyle={{ fontSize: 17, fontFamily: FontTypes.Roboto }}
        tabStyle={{
          justifyContent: "center",
          borderWidth: 0
        }}
        style={
          {
            // backgroundColor: "red"
          }
        }
      />
    )
  }

);



export const MyDrawerNavigator = createDrawerNavigator(
  {
    "My Cases": {
      screen: TabScreens
    },
    "Profile Setting": {
      screen: ProfileSetting
    },
    "Change Password": {
      screen: ChangePassword
    },
    Help: {
      screen: Help
    },
    Logout: {
      screen: Logout
    }
  },
  {
    contentComponent: Drawer,
    drawerBackgroundColor: "white",
    drawerType: "front",
    contentOptions: {
      labelStyle: {
        fontFamily: FontTypes.Roboto,
        color: ColorCodes.primary,

      },
      activeLabelStyle:{
        color:ColorCodes.iconColor
      }
    }
  }
);

export default createAppContainer(MyDrawerNavigator);