如何使用 React Navigation 5 创建自定义标签栏？

Question

所以，这是我的标签栏：

我尝试在按下按钮时仅在屏幕之间使用通用导航，但这不适用于我的情况。此外，我在 google 中看到的所有方法都已弃用。是否有可能在 React Navigation 5 中制作自定义标签栏？

Answer 1

您应该实现您的自定义标签栏，我创建了一个，如您在屏幕截图中所示 Live Snack

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

function HomeScreen() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
      }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        flexDirection: 'row',
        backgroundColor: '#ccc',
        height: 60,
        borderTopRightRadius: 20,
        borderTopLeftRadius: 20,
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      {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,
          });

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

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, justifyContent: 'space-between' }}>
            {route.name === 'Home' ? (
              <MaterialCommunityIcons
                style={{ alignSelf: 'center' }}
                name="home"
                size={22}
                color={isFocused ? '#673ab7' : '#222'}
              />
            ) : (
              <MaterialCommunityIcons
                style={{ alignSelf: 'center' }}
                name="settings"
                color={isFocused ? '#673ab7' : '#222'}
                size={22}
              />
            )}

            <View
              style={{
                width: 8,
                height: 3,
                backgroundColor: isFocused ? '#00f' : '#777',
                alignSelf: 'center',
              }}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          showIcon: true,
          showLabel: false,
          activeTintColor: 'red',
        }}
        tabBar={(props) => <MyTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}