如何在 React Native 中水平居中 TopTabNavigator？答案

【问题标题】：How to horizontally center TopTabNavigator in React Native?如何在 React Native 中水平居中 TopTabNavigator？
【发布时间】：2020-12-09 02:52:34
【问题描述】：

我一直在努力应用正确的样式，以便我的顶部选项卡导航器在屏幕上水平居中。我尝试将 AlignItems: center 应用于不同样式的道具，但这似乎不起作用。有什么建议吗？

这是我一直关注的文档：https://reactnavigation.org/docs/material-top-tab-navigator/

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Creators from "../../screens/Creators/Creators";
import Feed from "../../screens/Feed/Feed";
import Profile from "../../screens/Profile/Profile";

const Tab = createMaterialTopTabNavigator();

function TabNav() {
    return (
        <Tab.Navigator
            tabBarOptions={{
                labelStyle: {
                    fontSize: 12,
                    color: "white",
                },
                tabStyle: {
                    width: 100,
                    height: 40,
                    marginTop: 50,
                },
                indicatorStyle: {
                    backgroundColor: "white",
                },
                style: {
                    backgroundColor: "#03182d",
                },
            }}
        >
            <Tab.Screen name="Creators" component={Creators} />
            <Tab.Screen name="Feed" component={Feed} />
            <Tab.Screen name="Profile" component={Profile} />
        </Tab.Navigator>
    );
}

export default TabNav;

【问题讨论】：

删除tabStyle，它将完美运行或仅删除宽度。
感谢这个解决方案奏效了！

标签： react-native react-navigation

【解决方案1】：

删除tabStyle，它会像这样完美地工作

 <Tab.Navigator
            tabBarOptions={{
                labelStyle: {
                    fontSize: 12,
                    color: "white",
                },
                //remove this
                //tabStyle: {
                //    width: 100,
                //    height: 40,
                //    marginTop: 50,
                },
                indicatorStyle: {
                    backgroundColor: "white",
                },
                style: {
                    backgroundColor: "#03182d",
                },
            }}
        >
            <Tab.Screen name="Creators" component={Creators} />
            <Tab.Screen name="Feed" component={Feed} />
            <Tab.Screen name="Profile" component={Profile} />
        </Tab.Navigator>

或仅删除宽度，因为它会弄脏您的标签

【讨论】：