Question

我即将将我的第一个React Native应用程序部署到iOS应用商店。我遇到问题但是在布局方面。我正在使用flexbox系统并且目前正在为iPhone 6进行设计。我已经完成了所有的模型和Sketch，并拥有我希望它看起来的一切。

每当我尝试在iPhone 4中运行该应用程序时，我遇到了一个问题。我为iPhone 6实现的设计不符合iPhone 4所拥有的限制。

我可以尝试为iPhone 4重新设计一些东西，但是iPhone 6上的东西变得太小/太丑了。我真的需要在所有屏幕分辨率上看起来都很棒（比如iPhone 4 - iPhone 7 plus）。

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

第一个解决方案似乎不会给出每个屏幕尺寸的准确表示，第二个解决方案似乎只为造型创建了太多的代码，第三个解决方案似乎没有考虑静态尺寸和字体大小。

我通常会开始遵循第三种解决方案，但有些东西可能根本不是容器的百分比（例如，按钮高度，字体大小，一些边距和填充等）。

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

非常感谢那些感受到我的痛苦并找到了解决方案的人，请让我知道解决方案是什么。

Answer 1

好的，所以我想我现在明白了怎么做。看起来在iOS中设计多种屏幕尺寸的关键不一定是在较大的手机上使尺寸更大而在小尺寸手机上尺寸更小，而是设计适用于最小屏幕尺寸的尺寸，并且让尺寸更小的尺寸更大设备

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

以按钮为例：如果iPhone 4s上的40pt按钮看起来不错，它在iPhone 7 plus上也可以正常使用。好处是iPhone 7 plus的用户能够看到更多内容，而不仅仅是更大的按钮。

此设计还可以满足不需要多种屏幕尺寸的样式。

在确定您所使用设备的尺寸方面仍有一定作用，但这更多的是确定您是否能够显示更多内容（例如，在iPhone 5与iPhone 6的情况下，无论是否显示一个额外的标签按钮），以及布局（例如，我应该在哪里放置菜单）。

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

图片和视频是唯一的例外情况之一。似乎每当设备和设计需要时自动生成图像是有帮助的。幸运的是，通过使用与react-native包含的flexbox和响应技术，这非常简单。

我希望这可以帮助别人并节省一些时间。注意：这不提供横向与纵向的问题。在这种情况下，最好使用某种不同的风格。

Answer 2

我在关于Responsive Design in React Native的媒体上阅读了有用的博客。我没有时间尝试，但我认为它会解决你的问题，让我知道它对你有用。

Answer 3

我感受到了你的痛苦并为你的第一个选择了类似的解决方案，也类似于Shukarullah Shah所提到的blog post。在我的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文件。所以我定义了这些常量，我可以很容易地看到/比较每个样式。当然，您可以像提到的博客文章中那样改进这些定义。但我是一名开发人员，而不是一名设计师，所以我对完美的比例并不那么强烈。