React Native iOS中的响应式布局

Question

我即将将我的第一个React Native应用程序部署到iOS应用商店。但是，当涉及到布局时，我遇到了问题。我正在使用Flexbox系统，目前正在为iPhone 6进行设计。我已经完成了所有的模型和素描，并且拥有了我想要的所有功能。

但是，每当我尝试在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 vs iPhone 6的情况下，无论是否显示一个额外的标签按钮），以及布局（例如，我应该在哪里放置菜单）。

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

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

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

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文件我有每个组件。所以我定义了这些常量一次，我可以轻松地看到/比较每一个样式。当然，你可以像提到的博客文章那样改进这些定义。但我是一名开发人员，而不是设计师，所以我对完美比率没有那么急躁。