Question

我是React Native的新手，所以如果我问一个非常倾销的问题。请给我浪费你的时间。

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

我如何在React Native中实现这一目标？我从哪里开始挖掘？

Answer 1

如果您基于操作系统进行样式设置，则可以使用 @anfuca 中提到的Platform。如果您需要基于设备（即标签和电话）设置样式，则有一个方便的模块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
};

Answer 2

我也是新手，而且，根据我的理解，并从here中提取，有两种方法：

通过命名文件（推荐）平台特定文件可以命名为“[filename] .android.js”和“[filename] .ios.js”for Android   和iOS分别。如果我们导入或需要[filename]，它就会启动   该文件取决于主机平台。

在源代码中添加条件例如，如果您希望导航栏的背景为iOS和不同颜色   Android我们可以编写以下代码：
Code: backgroundColor: (Platform.OS === ‘ios’ ) ? ‘gray’ : ‘blue’

当然，你应该看一下official documentation。

Answer 3

您可以使用设备检测来检测移动设备或平板电脑，并相应地为移动设备和平板电脑使用单独的样式 https://www.npmjs.com/package/react-native-device-detection

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

3 个答案: