StackNavigator中如何实现Drawer和TabBar

Question

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

问题：

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

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

我的代码：

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，因为它替换了路由，因此一旦您进入应用程序并访问选项卡，您就永远无法导航回登录/注册/启动画面和抽屉内堆栈/开关，您可以将抽屉包装在您的顶级导航器和抽屉内的标签。

所以你的根导航应该是这样的。

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

如果您将这些导航器中的每一个都放在一个文件中，请务必在 Drawer 之前声明 Tab，在 Switch 之前声明 Drawer，否则会出错。

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

并且由于您作为抽屉没有从/通过标题进行操作，那么您能否确保您用于操作抽屉的 navigation 道具open close 或 toggle 操作是一个抽屉给的？