如何在StackNavigator中实现Drawer和TabBar

Question

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

问题：

1. 我使用本机库中的头组件，但我无法打开抽屉。
2. 如何使用我自己的抽屉和tabBar自定义组件？
3. 也许我需要改变结构。我会考虑如何改善结构的任何建议。

我使用了反应导航的第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，因为它会替换路由，这样一旦进入应用程序并访问堆栈/交换机内的Tabs和Drawer，您就永远无法导航回login / signup / splash，您可以将抽屉包装在顶层导航器和抽屉内的标签内。

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

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

而且，Tab Navigator会是，

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

如果您将每个导航器放在单个文件中，那么请在Switch之前在Drawer和Drawer之前声明Tab，否则会出错。

根据我的经验，自定义抽屉导航器非常简单且富有成效，但定制选项卡不是，没有适当的API文档，社区答案也有些误导。但是，对于正常的用例和大多数生动的用例，你可以完成你的工作，而不需要覆盖默认的，因为它已经高度可操作和可定制的图标，唯物主义和每个标签暴露它的onPress可以也很容易被覆盖。

当你抽屉没有通过标题进行操作时，那么你能否确保你用来操作抽屉的navigation道具open close或toggle动作是抽屉给出的？