react-native - React Native 材质顶部选项卡导航器：如何使文本等距？

Question

我"@react-navigation/material-top-tabs": "^5.1.7"在我的 React Native 应用程序中使用，并具有以下顶部选项卡导航器：

各个选项卡的宽度相等，但每个单词的长度不同，这意味着每个单词之间的空格不相等。我想让它在每个单词周围有相等的间距。这是我用于导航器的代码。in的style属性tabBarOptions是带有红色边框的父容器，tabStyle属性是带有黄色边框的子容器：

const CallsRequestsNavigatorOuter = () => createMaterialTopTabNavigator(
    {
        'Waiting': {screen: Waiting},
        'Active': {screen: Active},
        'Cleared': {screen: Cleared},
        'All': {screen: All},
    },
    {
      initialRouteName: "All",
        tabBarOptions: {
            style: {
                backgroundColor: 'transparent',
                borderTopWidth: 0,
                width: Math.round(Dimensions.get('window').width) - 100,
                left: 50,
                right: 0,
                shadowOpacity: 0,
                elevation: 0,
                borderWidth: 1,
                borderColor: 'red'
            },
            upperCaseLabel: false,
            tabStyle: {
                padding: 0,
                justifyContent: 'center',
                height: 0.45*topSwooshAspectRatio*Math.round(Dimensions.get('window').width),
                borderWidth: 1,
                borderColor: 'yellow',
            },
            labelStyle: {
                fontSize: normalizeFontSize(13)
            },
            indicatorStyle: {
                backgroundColor: 'transparent',
            },
            activeTintColor: Color.lightBlueOpaque,
            inactiveTintColor: 'white'
        }
    }
)

已解决：添加contentContainerStyle: {alignItems: 'center', justifyContent: 'space-around'}到tabBarOptions，并添加width: 'auto'到tabStyle。关键是，contentContainerStyle而不是style的直接父级tabStyle。所以现在我有了这个：