javascript React Native底部标签导航器太低,在iPhone 14 pro(真实的设备),expo 46.0.0的底部被切断

7uzetpgm  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(212)

我正在使用react-navigation-tabs中的createBottomTabNavigator(react-navigation-tabs版本:^2.4.0,react-navigation version ^4.4.4).当我在任何iOS模拟器上运行我的应用程序(iPhone 13,iPhone 14 pro,iPhone 14 max... with 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亲比模拟iPhone 14亲和理想的如何解决这个问题的真实设备?任何帮助是赞赏.
我试过的东西:

  • 在不同的模拟器设备上运行应用程序(iPhone13,iPhone14 Pro,iPhone14 Max...)-〉底部标签导航器正确显示
  • 在真实的的iPhone11 Pro上运行应用程序-〉底部标签导航器显示正确
  • 在真实的的iPhone14 Pro上运行应用程序-〉底部标签导航器被切断
  • 在标签栏选项中手动增加底部标签导航器的边距(这是有效的,但不是一个好的解决方案,因为这对每个设备都不同,例如,对于iphone11 pro来说,边距太大了……)
  • 在expo版本44.0.0上,相同的应用程序可以正常工作,标签导航器显示正确,升级到expo 46.0.0后,出现了所述问题
shyt4zoc

shyt4zoc1#

尝试使用safeAreaInsets

tabBarOptions: {
      activeTintColor: colors.primaryColor,
      safeAreaInsets: {
        bottom: 0,
      },
    },

或者

import { getBottomSpace } from 'react-native-iphone-x-helper';
//...
tabBarOptions: {
      activeTintColor: colors.primaryColor,
      safeAreaInsets: {
        bottom: getBottomSpace(),
      },
    },

相关问题