React Native 抽屉式导航作为选项卡导航的一部分

Question

我正在尝试在标签导航旁边实现抽屉导航，但我似乎无法理解如何实现。

该选项卡将有 5 个项目，并且应该出现在 所有 屏幕上。第 5 个选项卡应该会打开一个包含更多菜单项的抽屉。

点击任何抽屉的菜单项当然应该显示那些特定的屏幕，但标签导航应该仍然存在。

Answer 1

在底部标签栏（可以被顶部标签导航器替换）下方的代码中始终存在。

最后一个标签包含抽屉。默认不打开，但是可以通过 this.props.navigation.openDrawer() 请求来实现。

import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';

const buildScreen = name => {
 class Screen extends React.Component {
   render() {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>{name}</Text>
       </View>
     );
   }
 }
 return Screen;
}

const DrawerScreen = createDrawerNavigator(
 {
   Child1: buildScreen("DrawerChild 1"),
   Child2: buildScreen("DrawerChild 2"),
 },
 {
   // optional drawer options
   // cfr. https://reactnavigation.org/docs/en/drawer-based-navigation.html
 }
);

export default createBottomTabNavigator({
 Tab1: buildScreen("Tab1"),
 Tab2: buildScreen("Tab2"),
 Tab3: buildScreen("Tab3"),
 Tab4: buildScreen("Tab4"),
 DrawerScreen,
});

Answer 2

我知道这是一个老问题，但对于仍在寻找答案的人来说，这就是我的实现方式。

抽屉导航必须是您的主要导航。您的标签导航嵌套在其中。

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';

import AppNavigator from './AppNavigator';

const Drawer = createDrawerNavigator();

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
        <Drawer.Screen name='Home' component={TabNavigation} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigation;

在您的选项卡导航中，您选择显示抽屉导航的选项卡（在您的情况下为第五个选项卡）将有一个侦听器道具，它会在 tabPress 上触发一个函数，切换抽屉导航

import React from 'react';
import { Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const Home = () => (
    <Text> Hello Home</Text>
);
const Menu = () => {
      return null;
};

function TabNavigation(props) {
    return (
        <Tab.Navigator>
            <Tab.Screen 
                name='Home' 
                component={Home} 
            />
            <Tab.Screen
                name='Menu'
                component={Menu}
                listeners={({ navigation }) => ({
                    tabPress: e => {
                      e.preventDefault();                
                      navigation.toggleDrawer();
                    },
                  })}
            />
        </Tab.Navigator>
    );
}

export default TabNavigation;

Answer 3

你可以创建一个stackNavigator，里面有两个屏幕和一个materialTabNavigator：

const SomeStack= createStackNavigator({
  Start: StartStack,
  HomeScreenTab,
}

然后：

HomeScreenTab: {
        screen: HomeScreenTabTab
    }

与：

export default createMaterialTopTabNavigator(
    {
        Home: {
            screen: HomeStack,
            navigationOptions: {
                tabBarAccessibilityLabel: 'Tela Inicial do APP',
                tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} 
                              label="Start" />,
                tabBarIcon: ({ tintColor }) => (
                    <View style={styles.containerIcon}>
                        <FontAwesome color={tintColor} name="home" size{icons.iconMd} 
                         light />
                    </View>
                ),
            },
        },
        ...SomeOtherTabs
}

您将屏幕的内容放在屏幕属性上等等。