如何在本机中处理不同的屏幕尺寸？

Posted 2021-03-28

我正在开发一个反应原生的应用程序。我已经制作了一个在iPhone 6上工作正常但在iPhone 5或更低版本上无法正常工作的用户界面。我该怎么解决这个问题？

答案

您是否使用固定宽度和高度设计了应用程序？你绝对应该使用flexbox的功能，尽量避免设置固定大小的设置。 flex property可用于定义<View />应该使用多少空间与其他人相关，并且该页面上的其他属性可用于以灵活的方式布置元素，从而在一系列不同的屏幕尺寸上提供所需的结果。

有时，您可能还需要一个<ScrollView />。

如果确实需要固定尺寸，可以使用Dimensions.get('window')。

另一答案

您需要根据屏幕大小动态计算大小。

import { Dimensions, StyleSheet } from 'react-native'

[...]

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

[...]

const styles = StyleSheet.create({
    container: {
        flex: 1.
        flexDirection: 'column',
    },
    myView: {
        width: width * 0.8, // 80% of screen's width
        height: height * 0.2 // 20% of screen's height
    }
})

如果您正在使用Tabbarios，请记住Dimensions.get('window')为您提供整个屏幕的高度，这意味着您必须考虑到tabbar的固​​定高度为56.例如，当使用TabbarIOS时：

const WIDTH = Dimensions.get('window').width,
      HEIGHT = Dimensions.get('window').height - 56

然后如上所述使用WIDTH和HEIGHT。

另一答案

在构建UI时需要考虑比例。

1，使用percentage(%)作为宽度，使用aspectRatio作为高度，反之亦然。

container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%" of your width
}

2，使用flex作业百分比不能做。例如，如果列表中有任意大小的项目，并且您希望它们共享相同的大小。用flex: 1分配每一个

3，使用EStyleSheet中的rem而不是像素。 rem是一个规模的fator。例如，如果你的rem是2而你的“11rem”将变成“11 * 2”=“22”。如果我们将rem与屏幕尺寸成比例，那么您的UI将随任何屏幕尺寸缩放。

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

//how to use rem
container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%"
    padding: "8rem", //it'll scale depend on the screen sizes.
}

4，使用scrollView查看可能会扩展的内容。例如，一个TextView

5，每次考虑使用像素时，请考虑在方法3中使用rem。

有关详细说明，请阅读此处的文章。 7 Tips to Develop React Native UIs For All Screen Sizes