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

【问题标题】：how to handle different screen sizes in react native?如何在本机反应中处理不同的屏幕尺寸？
【发布时间】：2016-12-07 11:44:11
【问题描述】：

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

【问题讨论】：

标签： user-interface react-native screen-size

【解决方案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。

【讨论】：

这不适用于多个设备（实际上并不精确）
你在哪里看到这不起作用？它似乎对我来说效果很好（至少在 android 上）
在安卓上@Philberg。我的模拟器上的不同外观和真实设备上的不同外观。

【解决方案2】：

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

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

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

【讨论】：

【解决方案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，对可能超出框的内容使用滚动视图。例如，TextView

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

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

【讨论】：

纵横比把我的应用程序上的一切都搞砸了。我不知道为什么。有什么想法吗？