如何在React Native中应用多个设备布局

Question

我是React Native的新手，所以如果我问一个非常愚蠢的问题。请原谅我浪费您的时间。

我需要在React Native应用程序中应用多个设备布局。假设我的应用程序屏幕的外观完全不同，但是在移动设备和平板电脑设备上的业务流程却相同。

如何在React Native中实现呢？我从哪里开始挖掘？

Answer 1

2020 年编辑：

\n\n

好吧，我是个新手......！抱歉！\n就像@Hariks 所说，你可以尝试使用类似这个模块的东西\n并添加类似以下内容的内容：

\n\n

import Device from \'react-native-device-detection\';\n\n// Mobile Styles\nlet imageSize = 60;\n\n// Tablet Styles\nif(Device.isTablet) {\n  imageSize = 120;\n}\n

\n\n

旧答案：如果你想检测操作系统）

\n\n

我也是新手，根据我的理解，并从这里提取提取的，有两种方法：

\n\n

\n

通过命名文件（推荐） 平台特定文件可以命名为 \xe2\x80\x9c[文件名].android.js\xe2\x80\x9d 和 \xe2\x80\x9c[文件名].ios.js\xe2\x80 \x9d 分别适用于 Android\n 和 iOS。如果我们导入或需要 [文件名]，它会根据主机平台拾取文件。

\n\n

通过在源代码中添加条件 例如，如果您希望 iOS 和 Android 的导航栏背景具有不同的颜色，我们可以编写以下代码：

\n\n

Code: backgroundColor: (Platform.OS === \xe2\x80\x98ios\xe2\x80\x99 ) ? \xe2\x80\x98gray\xe2\x80\x99 : \xe2\x80\x98blue\xe2\x80\x99\n

\n

\n\n

当然，你应该看看官方文档。

\n

Answer 2

如果您是基于OS的造型，你可以使用平台由提到@anfuca。如果您需要基于设备（即标签和手机）进行样式设置，则有一个方便的模块react-native-device-detection

你可以在你的样式文件中做这样的事情

import Device from 'react-native-device-detection';

// Mobile Styles
let imageSize = 60;
// Tablet Styles
if(Device.isTablet) {
  imageSize = 120;
}

您也可以创建一个全局样式文件，您可以在其中定义字体大小以及所有基于设备/像素比率的内容。

commonstyle.js

import Device from 'react-native-device-detection';

let h1 = 20;
let h2 = 18;
let h3 = 16;
if(Device.isTablet) {
   h1 = 25;
   h2 = 22;
   h3 = 20;
}

module.exports = {
  h1,
  h2,
  h3
};