如何在 React Native 的 MaterialTopTabNavigator 中居中标签

Question

我添加了tabStyle: { width: "auto" } 以使 MaterialTopTabNavigator 的选项卡适合文本的宽度，但是通过添加此选项，选项卡会移动到左侧，如下图所示。

Tabs are too far to the left.

这个问题的答案是要删除tabStyle，但是如果我删除tabStyle，所有选项卡的宽度都会相同。

曾想过在tabBar中使用自己的组件，但因为移动tab时无法重现动画而放弃了。

我曾考虑使用 paddingHorizo​​ntal 强制它居中，但我决定不这样做，因为如果在操作系统中更改字体大小，它可能不会居中。

如果您对此有更多了解，请告诉我如何解决。

The design I want to implement (edited in Paint)

import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";


const Tab = createMaterialTopTabNavigator();

const Page = () => {
  return (
        <Tab.Navigator
          tabBarOptions={{
            labelStyle: {
              fontSize: 14,
              fontWeight: "bold",
            },
            activeTintColor: "#ffffff",
            inactiveTintColor: "#000000",
            pressOpacity: 1,
            indicatorStyle: {
              backgroundColor: "black",
              height: 30,
              borderRadius: 30,
              top: 9,
            },
            tabStyle: {
              width: "auto",
            },
          }}
        >
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Message" component={Message} />
          <Tab.Screen name="Store" component={Store} />
        </Tab.Navigator>
  );
};


export default Page;

Answer 1

我认为这绝对应该有效。如果没有，请告诉我。

import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";


const Tab = createMaterialTopTabNavigator();

const Page = () => {
  return (
        <Tab.Navigator
          tabBarOptions={{
            labelStyle: {
              fontSize: 14,
              fontWeight: "bold",
            },
            activeTintColor: "#ffffff",
            inactiveTintColor: "#000000",
            pressOpacity: 1,
            indicatorStyle: {
              backgroundColor: "black",
              height: 30,
              borderRadius: 30,
              top: 9,
            },
            tabStyle: {
              width: "auto",
            },
          }}
        >
          <View style={{flexDirection:"row", justifyContent:"center"}}>
          <View>
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Message" component={Message} />
          <Tab.Screen name="Store" component={Store} />
          </View>
          </View>

          // If the above does not work than use the below one and comment the above part
          
        //  <View style={{flexDirection:"row", justifyContent:"center"}}>
        //  <Tab.Screen name="Home" component={Home} />
        //  <Tab.Screen name="Message" component={Message} />
        //  <Tab.Screen name="Store" component={Store} />
        //  </View>

        </Tab.Navigator>
  );
};

Answer 2

只需将这些样式应用于导航器中的screenOptions 参数即可：

tabBarStyle: {
    alignSelf: "center",
    flexDirection: "row",
  },
  tabBarItemStyle: {
    width: "auto",
  }