javascript - 如何使用 BottomTabNav 和 MaterialTopTabNavigator 配置 React Navigation

Question

期望的结果

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

我还想在大多数屏幕顶部的栏中包含三个按钮。最左边的按钮应该从屏幕左侧打开一个抽屉，另外两个按钮将导航到特定屏幕。

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

我试过的

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

底部标签导航

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
  },
});

应用容器

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;

标签： javascriptreact-nativereact-navigation