我即将将我的第一个React Native应用程序部署到iOS应用商店。但是,当涉及到布局时,我遇到了问题。我正在使用Flexbox系统,目前正在为iPhone 6进行设计。我已经完成了所有的模型和素描,并且拥有了我想要的所有功能。React Native iOS中的响应式布局
但是,每当我尝试在iPhone 4中运行应用程序时,我都遇到了问题。我为iPhone 6实施的设计不符合iPhone 4拥有的约束条件。
我可以尝试重新设计iPhone 4的东西,但随后iPhone 6上的东西变得太小/丑陋。我真的需要在所有屏幕分辨率上看起来很棒(即iPhone 4 - iPhone 7 plus) 。
我在网上看到了很多不同的解决方案:对每个样式表值应用一个常量,这取决于设备的高宽比;检查设备并根据您的设备提供不同的组件;并更好地使用flexbox以使布局响应。
第一个解决方案看起来并不像它会在每个屏幕大小上给出准确的表示,第二个解决方案似乎只是为了样式创建了过多的代码,第三个解决方案似乎没有考虑静态大小和字体大小。
我通常会开始跟随第三溶液,但也有一些事情,可简单地不能在容器(例如,按钮的高度,字体大小,一些余量和填充等)
的百分比因此,我在问这个问题:在React Native中解决这个问题的最好方法是什么?我真的需要一个彻底的实际答案,可以解释开发过程中的最佳方式(例如,我应该设计最小的屏幕尺寸,然后适合更大尺寸?我应该为所有分辨率设计吗?等等。)。
对于那些已经感受到我的痛苦并已经发现一个很好的解决方案的人们,请提前致谢,请让我知道该解决方案是什么。
尺寸百分比在RN 0.42中引入。考虑到相对布局,这使得许多事情变得更容易 – zvona
谢谢,我同意。我发现这对图像很有帮助 –