React native 将本机抽屉导航与选项卡导航结合起来

我正在尝试在我的应用程序中设置顶部菜单和选项卡菜单。底部选项卡工作正常，但顶部菜单不显示。我试图设置的顶部菜单是我们单击的菜单，左侧菜单选项显示

class App extends Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <AppContainer
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      </Provider>
    );
  }
}

export default App;

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const MainStackNavigator = createStackNavigator({
  Home: {
    screen: TabNavigator
  }
});

const AppDrawerNavigator = createDrawerNavigator({
  Home:{
    screen: MainStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  Main: { screen: AppDrawerNavigator }
});

const AppContainer = createAppContainer(AppSwitchNavigator);

我是react native的新手，所以我不确定设置导航器选项的顺序。我做错了什么

---

谢谢

我将一些代码作为包含MainTabNavigator的MainDrainerNavigator的示例。选项卡导航器包含三个堆栈导航器。为此，我只参考HomeScreenNavigator，它是一个堆栈导航器。默认情况下，这将在“我的主页”选项卡中显示堆栈标题，但不会显示抽屉图标以打开抽屉。为了做到这一点，你需要在抽屉里放一个图标来切换抽屉。我通过访问主屏幕中的导航选项显示了这一点，具体如下所示：

    static navigationOptions = (navData) => {
        return {
            headerLeft: (
                <View style={styles.headerButtonLeft}>
                    <HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
                        <Item title="menu" iconName="ios-menu" onPress={() => {
                            navData.navigation.toggleDrawer()
                        }} />
                    </HeaderButtons>
                </View>
            ),
        }
    }

HomeScreennenavigator示例：

import { createStackNavigator } from 'react-navigation-stack';

import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';

const HomeScreenNavigator = createStackNavigator({
    Home: HomeScreen,
    MediaSelect: MediaSelectScreen,
    FinalizePost: FinalizePostScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: userInterface.accentColor,
            height: Styles.HEADER_HEIGHT,  
        },
    }
});

export default HomeScreenNavigator;

import {  createBottomTabNavigator } from 'react-navigation-tabs';

import  MessagesScreen  from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';

const MainTabNavigator = createBottomTabNavigator({
    LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () =>  ({
        tabBarLabel: 'Learn'
    })},
    HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
        tabBarLabel: 'Home' 
    }},
    MessagesScreen: { screen: MessagesScreen, navigationOptions: {
        tabBarLabel: 'Messages'    
    }},  
});

export default MainTabNavigator;

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

const MainDrawerNavigator = createDrawerNavigator({
    DrawerNav: MainTabNavigator
}, {
    drawerType: 'slide'
});

export default createAppContainer(MainDrawerNavigator);

MainTabNavigator示例：

import { createStackNavigator } from 'react-navigation-stack';

import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';

const HomeScreenNavigator = createStackNavigator({
    Home: HomeScreen,
    MediaSelect: MediaSelectScreen,
    FinalizePost: FinalizePostScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: userInterface.accentColor,
            height: Styles.HEADER_HEIGHT,  
        },
    }
});

export default HomeScreenNavigator;

import {  createBottomTabNavigator } from 'react-navigation-tabs';

import  MessagesScreen  from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';

const MainTabNavigator = createBottomTabNavigator({
    LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () =>  ({
        tabBarLabel: 'Learn'
    })},
    HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
        tabBarLabel: 'Home' 
    }},
    MessagesScreen: { screen: MessagesScreen, navigationOptions: {
        tabBarLabel: 'Messages'    
    }},  
});

export default MainTabNavigator;

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

const MainDrawerNavigator = createDrawerNavigator({
    DrawerNav: MainTabNavigator
}, {
    drawerType: 'slide'
});

export default createAppContainer(MainDrawerNavigator);

维护保养器示例：

import { createStackNavigator } from 'react-navigation-stack';

import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';

const HomeScreenNavigator = createStackNavigator({
    Home: HomeScreen,
    MediaSelect: MediaSelectScreen,
    FinalizePost: FinalizePostScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: userInterface.accentColor,
            height: Styles.HEADER_HEIGHT,  
        },
    }
});

export default HomeScreenNavigator;

import {  createBottomTabNavigator } from 'react-navigation-tabs';

import  MessagesScreen  from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';

const MainTabNavigator = createBottomTabNavigator({
    LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () =>  ({
        tabBarLabel: 'Learn'
    })},
    HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
        tabBarLabel: 'Home' 
    }},
    MessagesScreen: { screen: MessagesScreen, navigationOptions: {
        tabBarLabel: 'Messages'    
    }},  
});

export default MainTabNavigator;

import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

const MainDrawerNavigator = createDrawerNavigator({
    DrawerNav: MainTabNavigator
}, {
    drawerType: 'slide'
});

export default createAppContainer(MainDrawerNavigator);

App.js示例：

import React from 'react';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

import AppSwitchNavigator from './navigation/AppSwitchNavigator';

export default class App extends React.Component {
  state = { ... }

  render() {
    return (
      <Provider store={store}>
        <AppSwitchNavigator/>
      </Provider>
    );
  }
}

const store = createStore(rootReducer);

const rootReducer = combineReducers({ ... });