我如何在 React Native 中处理 flavor/target 资源？

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 中的 Targets，我有 2 个 Targets，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），在目标文件夹中创建资产文件夹并从那里加载图像