如何将处理抽屉导航显示的按钮添加到 TabNav

Question

如何实现一个包含处理 DrawerNav 显示的按钮的按钮导航器

Answer 1

要做到这一点，首先您必须添加自定义标签栏，方法是覆盖Tab.Navigator 组件上的tabBar 属性。 Here is an example from the official React Navigation docs.

然后您必须向自定义标签栏添加一个按钮，用于打开抽屉屏幕 (navigation.openDrawer)。

这是一个示例：

import React from 'react';
import {
  Button,
  SafeAreaView,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Tab = createBottomTabNavigator();

const TabItem = ({ label, onPress, isFocused = false }) => (
  <TouchableOpacity
    accessibilityRole="button"
    onPress={onPress}
    style={{
      flex: 1,
      padding: 20,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>{label}</Text>
  </TouchableOpacity>
);

const MyTabBar = ({ state, descriptors, navigation }) => {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  const onOpenDrawerPress = () => {
    navigation.openDrawer();
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      <TabItem label="Open drawer" onPress={onOpenDrawerPress} />
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TabItem label={label} onPress={onPress} isFocused={isFocused} />
        );
      })}
    </View>
  );
};

const TabOneScreen = () => (
  <SafeAreaView>
    <Text>Tab One screen</Text>
  </SafeAreaView>
);

const TabTwoScreen = () => (
  <SafeAreaView>
    <Text>Tab Two screen</Text>
  </SafeAreaView>
);

const TabNavigator = () => {
  return (
    <Tab.Navigator tabBar={MyTabBar}>
      <Tab.Screen name="TabOneScreen" component={TabOneScreen} />
      <Tab.Screen name="TabTwoScreen" component={TabTwoScreen} />
    </Tab.Navigator>
  );
};

const Drawer = createDrawerNavigator();

const Notifications = ({ navigation }) => (
  <SafeAreaView>
    <Text>Notifications Screen</Text>
    <Button title="Open drawer" onPress={navigation.openDrawer} />
  </SafeAreaView>
);

const Router = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Notifications" component={Notifications} />
    </Drawer.Navigator>
  );
};

export default Router;

也许唯一的“缺点”是您必须自定义自定义标签栏，以便您可以实现所需的外观和感觉。但是，从长远来看，这也可能会更好，因为您可以更好地控制标签栏及其项目。