Блог

Я изо всех сил пытался применить правильный стиль, чтобы мой навигатор верхней вкладки располагался по центру экрана по горизонтали. Я пытался применить 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, и он будет работать идеально, как это

  <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>
  

или удалите только ширину, поскольку она размазывает ваши вкладки