用户界面-如何在react native中处理不同的屏幕大小

Question

我正在react native上开发一个应用程序。我制作了一个UI，它在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，使用EStyleSheet中的rem而不是像素。rem是一个规模因子。例如，如果您的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。

要了解详细的解释，你可以在这里阅读这篇文章。为所有屏幕尺寸开发React Native UI的7个技巧

Answer 2

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

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

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

Answer 3

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

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')为您提供了整个屏幕的高度，这意味着您必须考虑到选项卡的固定高度为56。例如，当使用TabbarIOS:时

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

然后如上所述使用"宽度"one_answers"高度"。