Question

我试图使用React Navigation库将bottomTabNavigator嵌套在DrawerNavigator中，但是出现一个错误，告诉我使用React组件或Navigator来绘制DrawerNavigator的路线。

这是我创建DrawerNavigator的Home文件。

DrawerNavigator.js

这是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 })文件，我在其中创建bottomTabBarNavigator

MainTabNavigator.js

请仔细研究一下，并告诉我是否缺少什么，谢谢！

Answer 1

这是我带抽屉的bottomTabBar的代码。可能会对您有帮助。

只需在代码中添加 MainTabNavigation 作为 createDrawerNavigator 的第一个屏幕即可。

我使用了反应导航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);

Answer 2

这是我的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 3

不确定这是否仍然有帮助，但是我遇到了同样的问题，并通过将一个组件中的所有组件移至另一个导航器中来解决了该问题，因此createDrawerNavigator组件位于该文件的底部。看起来这里的吊装行不通吗？实际上，我对此感到困惑，但是你去了。

无法将bottomTabNavigator嵌套在DrawerNavigator中

3 个答案: