如何使用BottomTabNav和MaterialTopTabNavigator配置React导航

Question

所需结果

我正在创建一个使用BottomTabNav作为屏幕之间主要导航的应用程序。

我还想在大多数屏幕顶部的栏中添加三个按钮。最左侧的按钮应从屏幕左侧打开一个抽屉，其他两个按钮将导航到特定屏幕。

处理指定的顶部栏导航的最佳方法是什么？

我尝试过的

我已经创建了bottomTabNav，但是我不确定创建顶部导航栏的最佳方法，因为我不知道如何在React Navigation 3.0的同一屏幕上使用两者，并且我需要按钮会从屏幕左侧打开一个抽屉。

BottomTabNav

const BottomTabNav = createBottomTabNavigator({
    Home: {
      screen: HomeScreen,
    },
    Instant: {
      screen: Instant
    },
    Profile:{
      screen: Profile
    },
    Log: {
      screen: StartCompConfirm
    },
    InstantCompScreen: {
      screen: InstantCompScreen
    },
    Stats: {
      screen: StatsComponent
    }
  },
  {
    tabBarComponent: CustomTabNav,
    initialRouteName: "Home",  
  });

身份验证开关导航器

const AuthStack = createSwitchNavigator({ //this was a stack navigator in the example but that was causing state issue in guesture file so I switched to Switch Navigator
  Signup: {
    screen: SignupScreen
  },
  SignupAddFriends: {
    screen: SignupAddFriends
  },
  Login: {
    screen: LoginScreen
  },
  ForgotPassword: {
    screen: ForgotPasswordScreen
  },
});

AppContainer

const AppContainer = createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: BottomTabNav,
    Auth: AuthStack,
    TopNav: TopTabNav //TODO: I need to figure out how to nest the top navigator inside of the bottom navigator I think
  },
  {
    initialRouteName: 'AuthLoading' 
  }
));

export default AppContainer;