React Native iOS 中的响应式布局

Posted 2023-03-07

【中文标题】React Native iOS 中的响应式布局

【英文标题】：Responsive Layout in React Native iOS

【发布时间】：2017-07-28 12:47:30

【问题描述】：

我即将将我的第一个 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 中解决这个问题的最佳方法是什么？我真的需要一个彻底的事实答案来解释解决问题的最佳方法开发过程也是如此（例如，我是否应该针对最小的屏幕尺寸进行设计，然后再使其适应更大的尺寸？我应该针对所有分辨率进行设计吗？等等）。

非常感谢那些感受到我的痛苦并找到了一个很好的解决方案的人，请让我知道那个解决方案是什么。

【问题讨论】：

在 RN 0.42 中引入了维度的百分比。考虑到相对布局，这使许多事情变得更容易。

谢谢，我同意。我发现这对图像很有帮助

【参考方案1】：

好的，所以我想我现在明白如何去做了。看起来在 iOS 中为多种屏幕尺寸设计的关键不是一定要在更大的手机上让东西更大，在更小的手机上更小，而是针对最小的屏幕尺寸进行设计，让项目在更大的屏幕上看起来更小设备。

似乎这种响应式设计背后的想法是，拥有更大手机的人希望看到更多内容，而不是放大的内容。因此，如果它适用于小手机，它也适用于大手机。

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

这种设计还适用于不需要多种屏幕尺寸的样式。

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

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

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

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

【讨论】：

设计是一个主观的话题，很难说什么是对的，什么是错的。但简单地说，正确的就是对你有用的。我明白你的意思并给予你的信任。但肯定有一些老年人为了更大的比例、更大的按钮等而购买更大屏幕的手机。

我同意，但这不是 iOS 辅助功能的目的吗？为了让那些难以看到的人变得更大？

嗯，这也是一个有效的观点。到目前为止，我已经开发了一些使用 react-native 的应用程序，但老实说，我不知道我的按钮、图像、边距、字体大小等如何使用不同的可访问性选项。真丢人！ :)

【参考方案2】：

我感受到了您的痛苦，并选择了与您的第一个类似的解决方案，也类似于 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 文件。所以我定义了这些常量一次，我可以轻松地查看/比较我拥有的每一个样式。当然，您可以像提到的博客文章中那样改进这些定义。但我是开发人员而不是设计师，所以我对完美的比例并不那么前卫。

【讨论】：

感谢您的回答，但这似乎与 Shukarullah 所说的相呼应。不幸的是，我认为这不是解决这个问题的最佳方法。

我首先已经提到我的答案并没有那么不同。但是我提供了一些我认为可以支持我的答案的代码。

【参考方案3】：

我在媒体上阅读了有关Responsive Design in React Native 的有用博客。我没有时间尝试，但我认为它会解决你的问题，让我知道它对你有用。

【讨论】：

谢谢。我也读过那篇文章。不幸的是，它似乎属于我上面描述的第一个选择。我不认为这是解决这个问题的最佳方法。