如何在 React Native 中处理不同的屏幕尺寸？

Question

我正在开发一个基于 react-native 的应用程序。我制作了一个 UI，它在 iPhone 6 上工作正常，但在 iPhone 5 或更低版本上工作不正常。我应该如何解决这个问题？

Answer 1

您需要根据屏幕尺寸动态计算尺寸。

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

然后像上面那样使用 WIDTH 和 HEIGHT。

Answer 2

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

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

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

Answer 3

在构建 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。

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

如何在 React Native 中处理不同的屏幕尺寸？

how to handle different screen sizes in react native?

user-interface

screen-size

react-native