React Native Material 顶部选项卡样式

Question

这是显示我的问题的图片

我不知道为什么，但这段文字看起来像这样，我不知道哪个组件位于标签上方等等......

import React from 'react';
import {
    createMaterialTopTabNavigator,
    MaterialTopTabNavigationOptions,
    MaterialTopTabNavigationEventMap,
} from '@react-navigation/material-top-tabs';
import { withLayoutContext } from 'expo-router';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';

const { Navigator } = createMaterialTopTabNavigator();

export const MaterialTopTabs = withLayoutContext<
    MaterialTopTabNavigationOptions,
    typeof Navigator,
    TabNavigationState<ParamListBase>,
    MaterialTopTabNavigationEventMap
>(Navigator);
<MaterialTopTabs
            screenOptions={{
                tabBarStyle: {
                    backgroundColor: '#161622',
                    paddingHorizontal: 'auto',
                    paddingTop: 16,
                    width: '100%',
                },
                tabBarItemStyle: {
                    minWidth: 'auto',
                },
                tabBarIndicatorStyle: {
                    backgroundColor: '#A8DADC',
                },
                tabBarLabelStyle: {
                    fontSize: 16, // Customize font size if needed
                    fontFamily: 'Poppins-SemiBold',
                    textAlign: 'center',
                    color: '#B0B0B0',
                },
                tabBarPressOpacity: 0.7,
            }}
        >

请帮助我让它看起来应该（之间有空格）或网格 3fr 并且每个文本显示为 1fr

Answer 1

screenOptions={{
            tabBarStyle: {
                backgroundColor: '#161622',
                paddingHorizontal: 16,
                paddingTop: 16,
                width: '100%',
            },
            tabBarItemStyle: {
                flex: 1,
            },
            tabBarIndicatorStyle: {
                backgroundColor: '#A8DADC',
            },
            tabBarLabelStyle: {
                fontSize: 16,
                fontFamily: 'Poppins-SemiBold',
                textAlign: 'center',
                color: '#B0B0B0',
            },
            tabBarPressOpacity: 0.7,
        }}

tabBarStyle:

paddingHorizontal 设置为 16 以在左侧和右侧提供一些填充。 paddingTop 仍为 16。

tabBarItemStyle： flex: 1 确保每个选项卡项目占用相等部分的可用空间，将选项卡均匀分布在宽度上。 tabBarLabelStyle：

标签样式设置保持不变，以确保文本样式一致。