React Native iOS中的响应式布局

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 中针对多种屏幕尺寸进行设计的关键并不一定是在较大的手机上使内容变大，在较小的手机上变小，而是针对最小的屏幕尺寸上的内容进行设计，并让项目在较大的屏幕上看起来很小设备。

这种响应式设计背后的想法似乎是拥有更大手机的人希望看到更多内容，而不是放大的内容。因此，如果它可以在小手机上运行，​​那么它也可以在大手机上运行。

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

这种设计还使得造型不需要多个屏幕尺寸。

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

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

图像和视频是唯一的例外之一。每当设备和设计需要时，自动增长图像似乎有时会很有帮助。幸运的是，通过使用 React-Native 中包含的 Flexbox 和响应式技术，这非常简单。

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