Question

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

问题：

我使用本机库中的标头组件，但无法打开抽屉。
如何对抽屉和tabBar使用我自己的自定义组件？
也许我需要修改结构。我将考虑有关如何改善结构的任何建议。

我使用了反应导航的第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进行身份验证，因为它取代了路由，因此一旦进入应用程序，您将永远无法导航回到登录/注册/初始并且要访问堆栈/开关中的“标签”和“抽屉”，可以将“抽屉”包装在顶层导航器中，并将“标签”包装在抽屉中。

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

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文档可以做到这一点，并且社区答案也有些误导。但是，对于正常的用例，以及大多数生动的用例，您都可以完成工作而不必覆盖默认用例，因为默认用例在图标，唯物主义方面已经具有很高的可操作性和可定制性，并且每个选项卡都在{{1 }}也可以轻松覆盖。

并且由于您没有从抽屉中/通过割台操作抽屉，那么请确保您正在使用用于操作抽屉onPress navigation的{{1}}道具或open动作是抽屉发出的动作吗？

如何在StackNavigator中实现Drawer和TabBar

1 个答案: