每当我尝试在iPhone 4中运行应用程序时,我遇到了一个问题.我为iPhone 6实现的设计不符合iPhone 4拥有的限制.
我可以尝试为iPhone 4重新设计一些东西,但是iPhone 6上的东西变得太小/太丑了.我真的需要在所有屏幕分辨率上看起来都很棒(即iPhone 4 – iPhone 7 plus).
我在网上看到了许多不同的解决方案：对每个样式表值应用一个常量,取决于设备的纵横比;检查设备并根据您所使用的设备渲染不同的组件;并且更好地利用flexbox以使布局响应.
第一个解决方案似乎不会在每个屏幕尺寸上给出准确的表示,第二个解决方案似乎只为造型创建了太多的多余代码,而第三个解决方案似乎没有考虑静态大小和字体大小.
我通常会开始遵循第三种解决方案,但有一些东西可能根本不是容器的百分比(例如,按钮高度,字体大小,一些边距和填充等)
因此,我问的问题是：在React Native中解决此问题的最佳方法是什么？我真的需要一个彻底的事实答案,可以解释开发过程的最佳方式(例如,我应该设计最小的屏幕尺寸然后适合更大的尺寸吗？我应该为所有分辨率设计吗？等等).
非常感谢那些感受到我的痛苦并找到了解决方案的人,请让我知道这个解决方案是什么.
好的,所以我想我现在明白了怎么做.看起来在iOS中设计多种屏幕尺寸的关键不一定是在较大的手机上使尺寸更大而在小尺寸手机上尺寸更小,而是设计适用于最小屏幕尺寸的尺寸,并且让尺寸更小的尺寸更大设备.似乎这种响应式设计背后的想法是拥有更大手机的个人希望看到更多内容,而不是夸大内容.因此,如果它适用于小型手机,它也适用于大型手机.
以按钮为例：如果iPhone 4s上的40pt按钮看起来不错,它在iPhone 7 plus上也可以正常使用.好处是iPhone 7 plus的用户能够看到更多内容,而不仅仅是更大的按钮.
这种设计还使其成为不需要多种屏幕尺寸的样式.
在确定您所使用设备的尺寸方面仍有一定作用,但这更多的是确定您是否能够显示更多内容(例如,在iPhone 5与iPhone 6的情况下,是否显示其他内容选项卡按钮),以及布局(例如,我应该在哪里放置菜单).
您可以在大多数非常流行的Web应用程序本机应用程序上看到此类设计.
图像和视频是唯一的例外情况之一.似乎每当设备和设计需要时自动生成图像是有帮助的.幸运的是,通过使用与react-native包含的flexbox和响应技术,这非常简单.
我希望这可以帮助别人并节省一些时间.注意：这不提供横向与纵向的问题.在这种情况下,最好使用某种不同的风格.