StackNavigator中如何实现Drawer和TabBar

Question

我总是使用 react-native-router-flux 进行导航，但在这个项目中我需要使用 react-navigation，但我遇到了一些麻烦。我需要在堆栈导航器中实现抽屉和标签栏。

问题：

我使用 native-base 库中的 header 组件，但我无法打开抽屉.
抽屉和tabBar如何使用自己定制的组件？
也许我需要改变结构。我会考虑如何改进结构的任何建议。

我使用了 react-navigation 的第 3 版。

我的代码：

const AppStackNavigator = createStackNavigator({
    loginFlow: { 
      screen: createStackNavigator({
        intro: { screen: Intro },
        login: { screen: Login },
        registration: { screen: Registration },
      }),
      navigationOptions: {
        header: null
        }
    },
    mainFlow: {
      screen: createStackNavigator({
        MyDrawer: createDrawerNavigator({
            Dashboard: {
                screen: Home,
              },
              first: {
                screen: first,
              },
              second: {
                screen: second
              },
              third: {
                screen: third
              },
              last: {
                screen: last
              }
        }),

        // settings: { screen: SettingsScreen },
          someTab: { 
            screen: createBottomTabNavigator({
              main: { screen: Home },
              firsrTab: { screen: Screen1 },
              secondTab: { screen: Screen2 },
              thirdTab: { screen: Screen3 },
              nextTab: { screen: Screen4 }
            }),
            navigationOptions: {
              header: null
            },
          }
  }),
    navigationOptions: {
      header: null
    }
  }
});

const AppContainer = createAppContainer(AppStackNavigator);

import React from 'react';
import { Header, Left, Icon, Right } from 'native-base';

const CustomHeader = (props) => {
    return(
        <Header>
            <Left>
                <Icon
                    name='menu'
                    onPress={() => {this.props.navigation.openDrawer()}}
                />
            </Left>
        </Header>
    )
}

export { CustomHeader }

Answer 1

您可能想考虑将 SwitchNavigator 用于身份验证流程，而不是 Stack at the top，因为它会替换路由，这样一旦进入，您就永远无法导航回 login/signup/splash应用程序以及访问 stack/switch 中的选项卡和抽屉，您可以将抽屉包装在顶级导航器中，并将选项卡包装在抽屉中。

所以你的根导航看起来像这样。

export default RootNavigation = createSwitchNavigator({
  LoginScreen: {screen: LoginContainer},
  Application: {screen: AppDrawer},
});

您的抽屉导航器应该如下所示：

const AppDrawer = createDrawerNavigator({
  ApplicationTab: {screen: TabBar},
  ... other screen that you might want to use in drawer navigation.
}, {
   contentComponent : (props) => <MyCustomDrawer {...props} />
});

并且，选项卡导航器将是

const TabBar = createBottomTabNavigator({
  TabScreen1: {screen: Tab1},
  ... other tabs...
}, {
  tabBarComponent : (props) => <MyTabBar {...props} />
});

如果你把每个导航器都放在一个文件中，那么请在 Drawer 之前声明 Tab，在 Switch 之前声明 Drawer，否则会出错。

根据我的经验，自定义抽屉导航器非常简单且富有成效，但自定义选项卡则不然，因为没有合适的 API 文档，而且社区的回答也有些误导。但是，对于正常的用例和大多数生动的用例，您可以完成您的工作而无需覆盖默认的，因为它在图标、唯物主义方面已经具有高度的可操作性和可定制性，并且每个选项卡都在 onPress 也可以很容易地覆盖。

而作为抽屉的你没有操作from/via header，那么你能不能确保你用来操作抽屉的navigation道具open close 或 toggle 动作是抽屉给的吗？

StackNavigator中如何实现Drawer和TabBar

How to implement Drawer and TabBar in StackNavigator

react-native

react-navigation

native-base