如何在 React Native 中处理风味/目标资源？

Question

我正在构建一个 React Native 应用程序，它分别具有适用于 iOS/Android 的多个目标/风格。所以，我的 App1 和 App2 都有相同的代码库，但它们有不同的徽标、启动屏幕等。我不知道如何将不同的图像添加到不同的版本。

我在

android/app/build.gradle

中的 Android 设置是：

flavorDimensions "appVersion"
productFlavors {
    app1 {
        applicationId="com.app1name"
        dimension "appVersion"
    }
    app2 {
        applicationId="com.app2name"
        dimension "appVersion"
    }

然后在

android/app/src

中，我有一个

main

文件夹和一个

app2

文件夹，每个文件夹都包含一个

res

文件夹，其结构如下：

res
 - drawable-hdpi etc
 - mipmap-hpi etc (logos are in here)
 - values

当我构建 app1 时，它使用

main

文件夹中的徽标等；如果我构建 app2，它会使用

app2

中的内容（如果存在）。

同样，对于 XCode 中的目标，我有 2 个目标，app1 和 app2，并设置了图像资源，以便它引入正确的徽标等。

这对于徽标和启动屏幕来说效果很好，但是如何处理要在应用程序本身中显示的图像？假设仪表板需要为 App1 显示 Image1.png，为 App2 显示 Image2.png - Image1.png 和 Image2.png 应该存储在哪里？

主要问题是React Native中的图像路径不能是变量。要在 React Native 中显示图像，我必须使用类似的东西：

  <Image
    source={require('path/to/image')}
  />

我想我可以使用

switch

语句，因此将 image_app1.png 和 image_app2.png 存储在某个文件夹中，然后执行如下操作：

switch(appVersion) {
  case app1:
    imageName = image_app1.png
    break
  case app2:
    imageName = image_app2.png
    break
}

然后使用

imageName

创建路径，然后需要它，但这不起作用，因为路径不能是变量。

我见过的另一种解决方案是一开始就要求所有图像，然后只显示正确的图像：

const image1 = require('/path/to/Image1.png')
const image2 = require('/path/to/Image2.png')

switch(appVersion) {
  case app1:
    <Image source={image1} />
    break
  case app2:
    <Image source={image2} />
    break
}

但可能涉及预加载相当多的图像（我以后可能会有更多的应用程序版本，其中一些图像可能很大），我想这可能会减慢速度。

有没有办法将图像放入android / ios中的适当文件夹中（因此只需将图像称为

image.jpg

或所有版本的任何名称，但在不同的文件夹中有不同的版本），然后只需参考

image.jpg

和让它找到正确的吗？ 或者有处理这种情况的标准方法吗？

Answer 1

您可以使用react-native-fs或react-native-blob-util（首选之一，因为react-native-fs不再维护），在目标文件夹中创建资产文件夹并从那里加载图像

Answer 2

也许这不是最好的决定，但它将有助于避免将图像捆绑在一起。
您只需使用 nodeJs 脚本替换当前应用程序的资源即可（当前应用程序可以保留在 .env 或某些 config 文件中）

const fs = require('fs');

function copyFile(src, dest) {
  if (!fs.existsSync(src)) {
    return;
  }
  fs.copyFileSync(src, dest); // Overwrite files
}

并将目标文件夹放入 .gitignore

/src/assets/dest

对于资产，您可以保留以下文件夹：
src/资产/app1
src/assets/app2

对于图像来说会是这样的

<Image source={path/to/dest/folder/image} />