React native 如何在StackNavigator中实现抽屉和TabBar

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

问题：

我使用本机基本库中的标头组件，但无法打开 抽屉

如何为抽屉和tabBar使用我自己定制的组件

也许我需要改变一下结构。我会考虑如何改进结构的建议。

我使用了react导航的版本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 }

const AppStackNavigator=createStackNavigator({
登录流：{
屏幕：createStackNavigator({
简介：{屏幕：简介}，
登录：{屏幕：登录}，
注册：{屏幕：注册}，
}),
导航选项：{
标题：空
}
},
主流：{
屏幕：createStackNavigator({
MyDrawer:createDrawerNavigator({
仪表板：{
屏幕：主页，
},
第一:{
屏幕：首先，
},
第二：{
屏幕：秒
},
第三：{
屏幕：第三
},
最后:{
屏幕：上次
}
}),
//设置：{屏幕：设置屏幕}，
someTab:{
屏幕：CreateBoottomTabNavigator({
主：{screen:Home}，
第一个选项卡：{screen:Screen1}，
第二个选项卡：{screen:Screen2}，
第三个选项卡：{screen:Screen3}，
nextTab:{screen:Screen4}
}),
导航选项：{
标题：空
},
}
}),
导航选项：{
标题：空
}
}
});
const AppContainer=createAppContainer（AppStackNavigator）；
从“React”导入React；
从“本机基”导入{头，左，图标，右}；
const CustomHeader=（道具）=>{
返回(
{this.props.navigation.openDrawer（）}
/>
)
}
导出{CustomHeader}
您可能需要考虑身份验证流<Listnavigigs>代码>，而不是在上的<代码>堆栈，因为它取代了路由，这样，一旦进入应用程序，访问堆栈/交换机内的选项卡和抽屉，就永远无法导航到登录/注册/飞溅，您可以将抽屉包装在顶级导航器中，并将选项卡包装在抽屉中

因此，根导航将如下所示

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 AppDrawer=createDrawerNavigator({
应用程序选项卡：{screen:TabBar}，
…您可能希望在抽屉导航中使用的其他屏幕。
}, {
contentComponent：（道具）=>
});

选项卡导航器应该是

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

const TabBar=createBottomTabNavigator({
TabScreen1:{screen:Tab1}，
…其他选项卡。。。
}, {
tabBarComponent：（道具）=>
});

如果您将这些导航器放在一个文件中，请在抽屉前声明Tab，在开关前声明Drawer，否则会出现错误。

根据我的经验，定制抽屉导航器是非常简单和富有成效的，但定制选项卡不是，没有适合相同的API文档，社区答案也有点误导。
但是，对于正常的用例以及大多数生动的用例，您可以在不需要覆盖默认用例的情况下完成工作，因为默认用例在图标、属性方面已经具有高度的可操作性和可定制性，并且每个选项卡都会在按下按钮时显示其图标，也可以轻松覆盖

由于您的抽屉没有从/通过标题进行操作，那么您能否确保用于操作抽屉的
导航
道具
打开
关闭
或
切换
操作是由抽屉给出的
 我已经从我的一个项目中为您创建了一个自定义抽屉组件。希望这对您有所帮助。另外，我可以看到您在CustomHeader中使用了
this.props.navigation.openDrawer（）
，您应该使用
props.navigation.openDrawer（）
并确保正确地将道具传递给您的
CustomHeader
。@Hannibal您可以发布您在哪里使用CustomerHeader组件的代码吗？你也可以查看我在上面评论中分享的要点。这可能对您的编码风格有帮助。@surajmalviya您好，您使用的是react navigation v3吗？@ArchNoob我已经去了文档，看到选项仍然存在。例如，见。虽然我会亲自用v3试试。：）