React Native App设计在不同的IOS设备上是不同的

Question

大家好，我正在构建一个react原生应用程序，但我一直面临着一个问题，那就是应用程序在iOS设备上的设计是不同的。这些设备在iPhone6- iPhone 8和iPhone X- iPhone 13的设计上是一样的。但这两个群体在设计上是不同的。

Answer 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),
},