React Native iOS中的响应式布局 [英] Responsive Layout in React Native iOS

问题描述

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

I am about to deploy my first React Native application to the iOS app store. I am having a problem however when it comes to layout. I am utilizing the flexbox system and currently designing for iPhone 6. I have done all the mockups and Sketch and have everything how I would like it to look.

但是，每当我尝试在iPhone 4中运行该应用程序时，我都会遇到问题.我为iPhone 6实现的设计与iPhone 4的约束条件不符.

I have run into a problem however whenever I try to run the application in iPhone 4. The design that I have implemented for the iPhone 6 does not fit with the constraints that iPhone 4 possesses.

我可以尝试为iPhone 4重新设计外观，但是在iPhone 6上外观变得太小/丑陋.我真的需要在所有屏幕分辨率(例如，iPhone 4-iPhone 7 plus)上看起来都很棒.

I can try to redesign things for iPhone 4, but then things become too small / ugly on the iPhone 6. I really need things to look great on all of the screen resolutions (i.e., iPhone 4 - iPhone 7 plus).

我在网上看到了许多不同的解决方案:对每个样式表值应用一个常量，取决于设备的长宽比；检查设备并根据您所在的设备渲染不同的组件；并更好地利用flexbox来使布局具有响应性.

I have seen on the web many different solutions: apply a constant to each stylesheet value, dependent up the aspect ratio of the device; check the device and render different components based off the device your are on; and make better use of flexbox in order to make the layout responsive.

第一种解决方案似乎无法在每个屏幕尺寸上给出准确的表示，第二种解决方案似乎为样式创建了过多的代码，而第三种解决方案似乎没有考虑静态尺寸和字体大小

The first solution doesn't seem like it will give an accurate representation on each screen size, the second solution seems to create too much excess code just for styling, and the third solution seems to not account for static sizes and font sizes.

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

I normally would begin to follow the third solution, but there are some things that can simply not be a percentage of the container (e.g., button height, font size, some margin and padding, etc.)

因此，我问一个问题:在React Native中解决此问题的最佳方法是什么?我真的需要一个详尽的事实答案，以解释解决该问题的最佳方法.开发过程(例如，我应该设计最小的屏幕尺寸然后适合更大的尺寸吗?我应该设计所有分辨率的图像吗?等).

Therefore, I am asking the question: What is the best way to approach this problem in React Native? I really need a thorough de-facto answer that can explain the best way to go through the development process as well (e.g., should I design for the smallest screen size and then fit it to bigger sizes? should I design for all resolutions? etc.).

在此先感谢您感到我的痛苦并找到了一个很好的解决方案的人，请让我知道该解决方案是什么.

A big thanks in advance for those of you who have felt my pain and have discovered a great solution, please let me know what that solution is.

推荐答案

好，所以我想我现在就知道如何去做.似乎在iOS中为多种屏幕尺寸设计的关键不是一定要在较大的手机上使尺寸更大而在较小的手机上使尺寸缩小，而是要设计在最小屏幕尺寸下可以使用的屏幕，并在较大的屏幕上缩小尺寸.设备.

Ok, so I think i understand how to go about doing this now. It looks like the key for designing for multiple screen sizes in iOS is not to necessarily make things bigger on bigger phones and smaller on smaller phones, but to design for what works on the smallest screen size, and let the items look small on the bigger devices.

这种类型的响应式设计背后的想法似乎是，拥有更大手机的个人希望看到更多内容，而不是炸毁内容.因此，如果可以在小型电话上使用，那么也可以在大型电话上使用.

It seems that the idea behind this type of responsive design is that individuals with bigger phones desire to see MORE CONTENT, not blown up content. Therefore, if it works on small phones, it can also work on big phones.

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

Take buttons for instance: If a button at 40pt looks good on an iPhone 4s, it will also work well on an iPhone 7 plus. The benefit is that the user of the iPhone 7 plus is able to see more content, rather than just a bigger button.

此设计还使其不需要样式的多个屏幕尺寸.

This design also makes it to where multiple screen sizes are not necessary for styling.

在确定所用设备的尺寸时仍会起作用，但这更多的是确定您是否能够显示更多内容(例如，对于iPhone 5和iPhone 6，是否显示).显示一个额外的标签按钮)以及布局(例如，我应该在哪里放置菜单).

There is still a role in determining the dimensions of the device you are on, but this is more to determine whether you are able to display more content (e.g., in the case of iPhone 5 vs iPhone 6, whether or not to display an additional tab button), as well as the layout (e.g., where should I place the menu).

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

You can see this type of design on most of the very popular web application native apps.

图像和视频是唯一的例外之一.似乎有时在设备和设计需要时自动增长图像会很有帮助.幸运的是，通过使用react-native随附的flexbox和响应技术，这非常简单.

Images and videos are one of the only exceptions. It seems that it is helpful at times to automatically grow the images whenever the device and the design call for it. Fortunately, this is very simple by using a flexbox and responsive technologies as are included with react-native.

我希望这可以帮助其他人并节省一些时间.注意:这没有解决横向与纵向的问题.在这种情况下，最好使用某种不同的样式.

I hope this helps others and saves them some time. Note: this does not provide for the problem of landscape vs portrait. Under that situation, it is probably best to use some sort of varying styles.

这篇关于React Native iOS中的响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！