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

您可以创建一个带有两个屏幕和一个materialTabNavigator的stackNavigator：

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
}

您将屏幕内容放在screen属性上，依此类推。

将本机抽屉导航作为选项卡导航的一部分

3 个答案: