如何在 React Native 中为手机和平板电脑做出响应式设计？

Posted 2023-03-15

【中文标题】如何在 React Native 中为手机和平板电脑做出响应式设计？

【英文标题】：How can make responsive design for phone and tablet in react native?

【发布时间】：2017-09-06 10:23:59

【问题描述】：

说明：我正在学习一个 React Native 框架。我在手机中安装了应用程序。它工作正常。我想知道当设备密度发生变化时，React Native 将如何管理设计。

同样，在 Native android 中，我们为手机设备和平板设备提供不同的资源。我们还管理平板电脑和手机的纵向和横向布局文件。当我们的应用程序在设备上运行时，无论是手机还是平板电脑，它都会根据平板电脑或手机自动获取最适合的资源。

当我开始使用 react native 进行开发时，我有点卡住了。

react native 如何处理文本大小？

它在手机或平板电脑上运行时如何管理设计屏幕？

它如何管理不同密度设备中的图像资源？

有什么策略可以让我们像 Native Android 一样管理一切吗？

请帮我解决。

【参考方案1】：

您可以为此使用 flexbox。

例如。

flex: 1 是全宽 flex: 0.5 是一半

所以你可以做这样的事情。

React Native 中的所有维度都是无单位的，并且表示与密度无关的像素

对于图像，您可以执行 imagename@2x imagename@3x 详情在这里https://facebook.github.io/react-native/docs/images.html

<View style= flex: 1 >
  <View style= flex: 0.5  />
  <View style= flex: 0.5  />
</View>

这将创建一个包含 2 列的行。这将是响应式的。

【讨论】：

如果我有 5 张同名的图片，那么我如何在手机和平​​板电脑中管理相同大小的相同图片以及如何为手机和平板电脑提供相同的字体大小？

【参考方案2】：

您可以查看PixelRatio 上的文档，有几种方法可以处理不同的 dpi 和 fontScalings。

此外，您可能还想查看https://github.com/marudy/react-native-responsive-screen 哪个

是一个小型库，提供 2 个简单的方法，以便 React Native 开发人员可以编写完全响应的 UI 元素。无媒体 需要查询。