如何为不同的构建类型/风格构建 react-native 组件？答案

【问题标题】：How can I build react-native components for different build types/flavors?如何为不同的构建类型/风格构建 react-native 组件？
【发布时间】：2020-01-20 11:57:49
【问题描述】：

在 react-native 上，有一个特性是我们可以使用组件文件后缀来根据平台构建不同的组件，即。 component.ios.js 和 component.android.js 将为 ios 和 android 构建一个具有特定行为的 component 模块。

有没有办法根据构建变体/口味/方案构建不同的组件？假设我有一个pro 和一个lite 版本的应用程序，我想做这样的事情：

| some-folder/
| -- component.pro.js
| -- component.lite.js

所以当我import component from 'some-folder/component' 时，捆绑器可以检测我是否使用pro 或lite 构建变体并以与操作系统后缀类似的方式捆绑正确的javascript文件。

请注意，我知道我可以在运行时检查构建变体并正确提供正确的组件，但这意味着在应用程序中为错误变体捆绑代码 - 不必要地增加应用程序大小。

相关，有没有办法根据构建变体有条件地导入图像？我知道我可以将它们放在每个原生平台各自的资产文件夹中，但我想知道是否还有其他方法。

感谢任何帮助。

【问题讨论】：

标签： javascript android ios react-native

【解决方案1】：

不，这是不可能的，因为 React Native 会检测文件何时具有 .ios。或 .android。扩展并为每个平台加载正确的文件。

您必须为每个文件编写自己的包装器，例如

组件

-->component.pro.js

-->component.lite.js

--> index.js

在 index.js 文件中，您已经从 react native 检查平台或操作系统并返回特定文件

例如文件

import ComponentPro from './component.pro.js';
import ComponentLite from './component.lite.js';
import {Platform} from 'react-native';

export defualt Component=(props)=>{
  if (platform.os==='pro') return <ComponentPro {...props}/>;
  else if (platform.os==='lite') return <ComponentLite {...props}/>;
}

【讨论】：