我正在使用 react-navigation-tabs 中的 createBottomTabNavigator 开发一个带有 expo 的本机应用程序(react-navigation-tabs 版本:^2.4.0,react-navigation 版本 ^4.4.4)。当我在任何 ios 模拟器(iphone 13、iphone 14 pro、iphone 14 max...使用 ios 16.2)上运行我的应用程序时,底部选项卡导航器会正确显示。然而,在真实设备(iphone 14 pro,ios 16.3)上,标签栏被移动到底部大约 20 个像素并被切断:
当我定义选项卡导航器时,我不更改任何边距、填充或高度属性,而是坚持默认值,我唯一更改的是色调:
import React from "react";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { Ionicons } from "@expo/vector-icons";
...
const MainTabNavigator = createBottomTabNavigator(
{
Home: {
screen: HomeNavigator,
navigationOptions: {
tabBarLabel: "Home",
showLabel: false,
tabBarIcon: tabInfo => {
return (
<Ionicons
name={icons.home}
size={25}
color={tabInfo.tintColor}
/>
);
},
},
},
Map: {...},
Workouts: {...},
Events: {...},
Profile: {...},
},
{
tabBarOptions: {
activeTintColor: colors.primaryColor,
},
}
);
const MainNavigator = createSwitchNavigator({
Startup: StartupScreen,
Auth: AuthNavigator,
ProfileCreation: ProfileCreationFlowScreen,
ForgotPassword: ForgotPasswordScreen,
Main: MainTabNavigator,
});
export default createAppContainer(MainNavigator);
有谁知道为什么标签栏在真实 iphone 14 pro 上的显示方式与在模拟 iphone 14 pro 上的显示方式不同,理想情况下如何在真实设备上解决此问题?任何帮助表示赞赏。
我试过的东西:
尝试使用
safeAreaInsets
tabBarOptions: {
activeTintColor: colors.primaryColor,
safeAreaInsets: {
bottom: 0,
},
},