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

Question

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

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

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

因此，当我从“某些文件夹/组件”导入组件时， bundler 可以检测我使用的是pro还是lite code> 构建变体并 bundle 正确的 javascript 文件，其方式与操作系统后缀类似。

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

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

感谢任何帮助。

Answer 1

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

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

组件

--> 组件.pro.js

--> 组件.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}/>;
}