React Native iOS 标准和缩放显示 [英] React Native iOS Standard and Zoomed Display

问题描述

我在 RN iOS 应用程序中遇到问题.当显示为标准时一切正常，但当它被放大时，顶部栏完全混乱，用户无法点击顶部栏中的任何内容.尝试了 SafeAreaView 但没有帮助原因.

I have a problem in RN iOS app. When display is standard everything is fine, but when it is Zoomed, the top bar totally messes up, users can't click on any anything in top bar. Tried SafeAreaView but did not helped the cause.

请问有什么办法可以确定显示是放大的还是标准的?

Question is there any way to find out if the display is zoomed or standard?

推荐答案

这里是查找显示是缩放还是标准的解决方案

Here is the solution for finding if the display is zoomed or standard

import DeviceInfo from 'react-native-device-info'

const DEVICES = [
    'iPhone X',
    'iPhone XS',
    'iPhone XS Max',
    'iPhone XR'
]

const DEVICE_STANDARD_HEIGHTS = {
    "iPhone X": 812,
    "iPhone XS": 812,
    "iPhone XS Max": 896,
    "iPhone XR": 896,
}


const { height, width } = Dimensions.get("window");

const device_name = DeviceInfo.getModel();


let is_zoomed = false;

if (DEVICES.includes(device_name)) {
    if (DEVICE_STANDARD_HEIGHTS[device_name] > height) { // because when display is zoomed height is less than the standard display
        is_zoomed = true;
    }
}

根据您的要求修改它:)

Modify it according to your requirements :)

这篇关于React Native iOS 标准和缩放显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！