如何使手机和平板电脑的响应式设计能够反应原生？

Question

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

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

当我在本地反应中开始开发时，我有点卡住了。

本机如何处理文本大小？

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

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

我们有什么策略可以像Native Android一样管理所有内容吗？

请帮我解决。

Answer 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列的行。这将是响应。

Answer 2

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

另外，您可能要研究https://github.com/marudy/react-native-responsive-screen，其中

是一个小型库，提供2个简单方法，因此React Native 开发人员可以对UI元素进行完全响应式编码。没有媒体 需要查询。