React原生iOS中的响应式布局

Question

我将把我的第一个React Native应用程序部署到iOS应用程序商店。我有一个问题，但当谈到布局。我正在使用flexbox系统，目前正在为iPhone6设计。我已经完成了所有的模型和草图，并且拥有了我想要的所有外观。

然而，每当我试图在iPhone 4中运行该应用程序时，我都会遇到一个问题。我为iPhone 6实现的设计不符合iPhone 4拥有的约束。

我可以尝试为iPhone4重新设计东西，但是在iPhone6上东西变得太小/太丑了。我真的需要在所有屏幕分辨率上看起来都很棒的东西（即iPhone4-iPhone7 plus）。

我在网上看到过许多不同的解决方案：对每个样式表值应用一个常量，这取决于设备的纵横比;检查设备并根据您所在的设备呈现不同的组件;并更好地利用弹性框，以使布局具有响应性。

第一种解决方案似乎无法准确表示每种屏幕大小，第二种解决方案看起来只是为了设计样式而创建了过多的代码，而第三种解决方案则似乎没有考虑静态大小和字体大小。

我通常会开始遵循第三个解决方案，但有些东西不能简单地是容器的百分比(例如，按钮高度，字体大小，一些空白和填充等)。)

因此，我要问的问题是：在 React Native 中解决这个问题的最佳方法是什么？我真的需要一个彻底的事实答案，可以解释完成开发过程的最佳方式（例如，我是否应该设计为最小的屏幕尺寸，然后将其适合更大的尺寸？我应该为所有分辨率进行设计？等等）。

对于那些感受到我的痛苦并发现了一个很好的解决方案的人，请提前向我表示感谢，请让我知道这个解决方案是什么。

Answer 1

我已经阅读了关于 React Native 中关于响应式设计的有用博客。我没有时间尝试它，但我认为它会解决你的问题，让我知道它如何为你工作。

Answer 2

我感受到了你的痛苦，并选择了一个与你的第一个类似的解决方案，也类似于Shukarullah Shah提到的博客文章。在我的style.js文件中，首先我使用获取设备宽度和高度；

const x = Dimensions.get('window').width;
const y = Dimensions.get('window').height;

然后我把每个维度，x和y，分成10，20和40。对于宽度，它变得像;

const widthS = x / 40; // ~10 px
const widthM = x / 20; // ~20 px
const widthL = x / 10; // ~40 px

然后我使用这些值来定义任何尺寸的边距、填充、图像尺寸等。我还为我拥有的每个组件使用一个通用的style.js文件。这样我就可以一次定义这些常量，并且可以轻松地查看/比较我拥有的每一个样式。当然，你可以像博客文章中提到的那样改进这些定义。但是我是开发人员而不是设计师，所以我对完美比例不太敏感。

Answer 3

好了，我想我现在明白该怎么做了。看起来，在iOS中为多种屏幕尺寸进行设计的关键不一定是在更大的手机上做得更大，在更小的手机上做得更小，而是设计适合最小屏幕尺寸的产品，并让这些产品在更大的设备上看起来更小。

这种响应式设计背后的想法似乎是，拥有更大手机的人希望看到更多的内容，而不是放大的内容。因此，如果它适用于小型手机，它也可以适用于大型手机。

以按钮为例：如果40pt的按钮在iPhone 4s上看起来不错，那么它在iPhone 7 plus上也可以很好地工作。好处是iPhone 7 plus的用户能够看到更多内容，而不仅仅是一个更大的按钮。

这种设计也使其成为不需要多个屏幕尺寸的样式。

确定您所在设备的尺寸仍然有一定的作用，但这更重要的是确定您是否能够显示更多内容（例如，在iPhone 5和iPhone 6的情况下，是否显示额外的选项卡按钮），以及布局（例如，我应该将菜单放在哪里）。

您可以在大多数非常流行的Web应用程序本机应用程序上看到这种类型的设计。

图像和视频是唯一的例外之一。每当设备和设计需要时，自动增长图像似乎是有帮助的。幸运的是，通过使用flexbox和响应式技术，这非常简单，就像react-本机所包含的那样。

我希望这能帮助其他人并节省他们一些时间。注意：这并没有提供风景与肖像的问题。在那种情况下，最好使用某种不同的风格。