React Native App 设计在不同的 IOS 设备上有所不同答案

【问题标题】：React Native App design is different in different IOS DeviceReact Native App 设计在不同的 IOS 设备上有所不同
【发布时间】：2021-11-14 07:48:02
【问题描述】：

大家好，我正在构建一个 React Native 应用程序，但我长期面临一个问题，即 iOS 设备中的应用程序设计不同。设备工作 iPhone 6-iphone 8 设计相同，iPhone X - iPhone 13 相同。但这两组的设计不同。

【问题讨论】：

我还没有得到你的问题。究竟是什么问题？尽管有尺度，但一些特征也有所不同。

标签： react-native react-hooks

【解决方案1】：

当您说它们的设计不同时，您是指它们的设备尺寸吗？如果是这样，有一些解决该问题的方法。就个人而言，我建议为您用于开发应用程序的设备的宽度和高度创建缩放函数。应用比例函数将使您的设计在不同设备中保持一致。

import {Dimensions, PixelRatio} from 'react-native';
const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');

// based on iphone 11s's scale
const scalew = SCREEN_WIDTH / 828;
const scaleh = SCREEN_HEIGHT / 1792;

export function normalizeh(size) {
  const newSize = size * scaleh;
  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}

export function normalizew(size) {
  const newSize = size * scalew;
  return Math.round(PixelRatio.roundToNearestPixel(newSize));
}

那么在造型的时候，

menuBtn: {
    width: normalizew(60),
    color: '#212529',
    marginRight: normalizew(30),
},

【讨论】：