React native 为什么我的标题在我的底部。选项卡中没有垂直居中？

正如您在图像上看到的，导航栏的标题没有垂直居中

我试图操纵头部垂直调校，但没有任何改变

在网络上也可以正确渲染，但在安卓系统上则不行

这是我的密码：

import * as Font from 'expo-font';

import { View, Text } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import HomeScreen from '@app/components/home-screen/HomeScreen.js'
import SearchScreen from '@app/components/search-screen/SearchScreen.js'


export default class App extends React.Component {

        constructor(props) {
                super(props);      
                var navigation = this.props.navigation;
                this.state = {
                        fontLoaded : false
                } 
        }

        async componentDidMount() { 
                try {
                        await Font.loadAsync({
                                'DMSans-Regular': require('@fonts/DMSans-Regular.ttf'),
                        })
                        this.setState({ fontLoaded: true})
                } catch (error) {
                        console.log(error)
                }
        }

        render() {
                if(this.state.fontLoaded) {
                        return (
                                <NavigationContainer>
                                        <BottomTab.Navigator>
                                                <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, headerTitleStyle: { alignSelf: 'center' } }} />
                                                <Stack.Screen name="Search" component={SearchScreen} />
                                        </BottomTab.Navigator>
                                </NavigationContainer>
                        );
                }
                else {
                        return (<View><Text>Loading...</Text></View>);
                }
        }
}

const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

import*作为“expo字体”中的字体；
从“react native”导入{View，Text}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“@app/components/home screen/HomeScreen.js”导入主屏幕
从“@app/components/search screen/SearchScreen.js”导入SearchScreen
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
var navigation=this.props.navigation；
此.state={
错误：错误
} 
}
异步组件didmount（）{
试一试{
等待Font.loadAsync({
“DMSans Regular”：需要（“@font/DMSans Regular.ttf”），
})
this.setState（{fontLoaded:true}）
}捕获（错误）{
console.log（错误）
}
}
render（）{
if（this.state.fontload）{
返回(
);
}
否则{
返回（加载…）；
}
}
}
const Stack=createStackNavigator（）；
const BottomTab=createBottomTabNavigator（）；

这里的问题是，

底部选项卡导航器

希望每个选项卡都有一个图标，如果您不想使用图标，您可以使用以下内容让它们保持在中心位置：

...
<BottomTab.Navigator
      tabBarOptions={{
        labelStyle: {
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          textAlignVertical: 'center',
        },
      }}>
      <Stack.Screen
        name="Home"
...

。。。

我是这样做的：

const tabBarOptions = {
        tabStyle: {
                justifyContent: 'center',
        },
}


<NavigationContainer>
        <BottomTab.Navigator tabBarOptions={ tabBarOptions }>
               <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false, headerTitleStyle: { alignSelf: 'center' } }} />
               <Stack.Screen name="Search" component={SearchScreen} />
        </BottomTab.Navigator> 
</NavigationContainer>

const选项卡选项={
标签样式：{
为内容辩护：“中心”，
},
}
为什么要等待图标？如果是这样的话，为什么它会在网络上正确对齐，而不是在android上，因为我现在没有图标？这很有趣，因为现在我的网络视图被破坏了，主页和搜索屏幕在网络视图上重叠。我找到了一个更好的解决方案，您可以在tabBarOptions中使用tabStyle，然后将justifyContent设置为中心。哦，这个解决方案确实效果更好。至于为什么标签会等待图标，我相信大多数底部标签导航都使用图标，有时使用带有标签的图标，但很少看到只在底部导航上使用标签的应用程序。无论如何，我认为他们应该保留以前版本中的旧选项
showIcon
，这会很快解决您的问题。