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

Question

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

Answer 1

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

1，percentage(%)用于宽度和aspectRatio高度，反之亦然。

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

2，使用flex不能完成工作百分比。例如，如果您在列表中具有任意大小的项目，并且希望它们共享相等的大小。为每个人分配flex: 1

3， 使用remEStyleSheet而不是pixel。rem 是一个有规模的人。例如，如果您rem是2，并且您的“ 11rem”将变为“ 11 * 2” =“ 22”。如果我们rem与屏幕尺寸成比例，则您的用户界面将随任何屏幕尺寸缩放。

//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，每当您考虑使用像素时，请考虑rem在方法3中使用。

有关详细说明，您可以在此处阅读文章。针对所有屏幕尺寸开发React Native UI的7条技巧

Answer 2

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

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.

Answer 3

您是否使用固定宽度和高度设计了应用程序？你绝对应该使用flexbox的功能,尽量避免设置固定大小的设置.该柔性特性可用于定义多少空间<View />应相关联系使用他人,并在该网页上的其他属性可以用来布置中,应该给于各种不同屏幕尺寸的预期效果的灵活方式的元素.

有时,您可能还需要一个<ScrollView />.

当你需要固定尺寸时,你可以使用Dimensions.get('window').