抽屉导航不适用于底部标签导航-React Native

Question

我正在尝试在我的React Native应用程序中集成抽屉导航。这就是我所做的：

我的AppNavigator.js：

//All the imports here


const AuthStack = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  PhoneAuth: AuthPhoneTest,
  SignOut: SignOut,
},
{
  initialRouteName: 'AuthLoading'
}
);

const ProfileNavigator = createStackNavigator({
  UserInfo1: UserInfoScreen1,
  UserInfo2: UserInfoScreen2,
  UserInfo3: UserInfoScreen3,
})


const MyDrawerNavigator = createDrawerNavigator({
  MainTab: {
          screen: MainTabNavigator,
          navigationOptions: {
            title:'Home',
            drawerIcon: ()=><FontAwesome name={'home'} size={26}/>,
          }},
  Profile: ProfileNavigator,
  SignOut: {
          screen: SignOut,
          navigationOptions: {
            title:'Sign Out',
            drawerIcon: ()=><FontAwesome name={'logout'} size={26}/>,
          }},
},
{
  // define customComponent here
  contentComponent: props => 
  <ScrollView>
      <SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never' }}>
        <Text>Your Own Header Area </Text>
        <DrawerItems {...props} />
        <Text>Your Own Footer Area After</Text>
      </SafeAreaView>
  </ScrollView>,
  contentOptions: {
    headerStyle: {
      backgroundColor: 'white',
    },
    itemsContainerStyle: {
      marginVertical: 140,
    },
    iconContainerStyle: {
      opacity: 1
    }
  },
}
);

const App = createSwitchNavigator({
  Auth: AuthStack,
  MyDrawer: {
    screen: MyDrawerNavigator,
    navigationOptions: {
        header: null,
    },
  },
  Main: MainTabNavigator,
},{
  initialRouteName: 'Auth',
})

const previousGetActionForPathAndParams = App.router.getActionForPathAndParams;

Object.assign(App.router, {
  getActionForPathAndParams(path, params) {
    const isAuthLink = path.startsWith('activity');
    if (isAuthLink) {
      return NavigationActions.navigate({
        routeName: 'AuthLoading',
        params: { ...params, path },
      });
    }
    return previousGetActionForPathAndParams(path, params);
  },
});

const XYZApp = createAppContainer(App);

const prefix = 'https://xyzapp.com/referral/';

export default MainApp = () => <XYZApp uriPrefix={prefix} />;

在这里，AuthLoading屏幕是我的启动屏幕，在将用户发送到主屏幕之前，我执行了所有后台任务。这应该是应用加载时的第一个屏幕。

MainTabNavigator.js的外观如下：

//All the imports here

const ActivityListNavigator = createStackNavigator({
  ActivityList: ActivityListScreen,
  DealsForActivity: {
    screen: DealsForActivityScreen,
    path: 'dealsForActivity/:activityId'},
  DealDetails: {
    screen: DealDetailsScreen,
    path: 'dealDetails/:activityId/:dealId'},
  DealFullTerms: DealFullTermsScreen,
  Roulette: RouletteScreen,
},
  {
    defaultNavigationOptions: {
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      headerStyle: {
        backgroundColor: '#f4511e',
      },
    },
    navigationOptions: {
      tabBarLabel: 'HOME',
      tabBarIcon: ({ focused }) => (
        <TabBarIcon
          focused={focused}
          name={
            Platform.OS === 'ios'? 'home': 'home'
          }
        />
      ),
    },
  }
)

const PopularDealsStack = createStackNavigator({
  PopularDeals: HotDealsScreen,
});

PopularDealsStack.navigationOptions = {
  tabBarLabel: 'HOT DEALS',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'fire' : 'fire'}
    />
  ),
};

const HighestRated = createStackNavigator({
  HighestRatedDeals: HighestRatedDealsScreen,
});

HighestRated.navigationOptions = {
  tabBarLabel: 'MOST RATED',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'heart' : 'heart'}
    />
  ),
};

export default createBottomTabNavigator({
  ActivityListNavigator: {screen: ActivityListNavigator,
    path: 'activity'},
  HighestRated,
  PopularDealsStack,
});

现在，当我加载应用程序时，我的AuthLoading屏幕将运行并将用户带到ActivityListNavigator。现在，在此屏幕上，我希望可以使用Drawer Navigation，因为ActivityListNavigator是MainTabNavigation的一部分，MainTabNavigation已经包含在DrawerNavigation中。但是，我在这里看不到“抽屉导航”。如果我将MyDrawer作为App的初始路径，则会出现DrawerNavigation。但是正如我提到的，我需要AuthLoading作为我的初始路由。我在这里做错什么了。

此外，理想情况下，MyDrawer导航不应该是App的一部分（因为它已经包含在Drawer Nav中），但是当我从App删除它时，我的应用只会停留在AuthLoading屏幕上。