javascript - 如何在 react-native 中编写特定于 flavor 的代码？

Question

大约一周前，我开始开发一个白标应用程序，其中唯一不同的应用程序是一些颜色值、图像源和 API 端点，但应用程序本身做的事情完全相同。

所以最近几天我尝试学习如何从同一个项目构建多个应用程序......(这里主要关注 Android)在我的旅程中我找到了一些指南并且我设法通过以下方式使其工作this guide并在我的 build.gradle 中设置产品口味。

    productFlavors {
    firstapp {
        applicationIdSuffix '.firstapp'
        resValue "string", "build_config_package", "com.myapp"
    }
    secondapp {
        applicationIdSuffix '.secondapp'
        resValue "string", "build_config_package", "com.myapp"
    }
}

好的，现在我可以运行react-native run-android --variant=firstappDebug 来在开发时模拟应用程序，然后在发布时运行 gradlew assembleFirstappRelease 并且能够生成多个(在本例中为 2 个)不同的构建。

但是，由于我是一个新手，我找不到合适的方法来编写要在构建特定 flavor 时呈现的特定 flavor 代码。

另外，我关注了this other guide这或多或少展示了如何做到这一点，但同样，我缺乏正确执行某些步骤的知识，所以我在那里失败了。我无法弄清楚我应该在哪个文件中正确处理 STEP 2 中的代码，也不知道什么是 BuildConfig.FLAVOR，NSBundle.mainBundle()，在第 3 步 UtilityManager.getTarget()，RNBuildConfig.FLAVOR

总之..我仍在努力学习成长，我会更深入地研究环境变量...但我觉得有必要向社区寻求帮助。

Answer 1

我在写这篇文章时使用的解决方法(这很重要)是: Product Flavors (Android) 和 XCode Schemes (iOS)，用于构建具有不同名称和图标的不同应用。

要为特定的 Flavor/Scheme 编写代码，我使用了环境变量。我使用所需的配置变量创建了多个 .env 文件。例如

//.env.mycustomenv

LOGIN_TITLE_TEXT= "My App"
LOGIN_STATUSBAR_CONTENT= "light-content"
LOGIN_BACKGROUND_COLOR= "#333"
LOGIN_SIMPLE_TEXT_COLOR= "#FFF"
LOGIN_TEXTINPUT_BACKGROUD_COLOR= "#FFF"
LOGIN_LOGIN_BUTTON_COLOR= "#009933"

从命令行使用 react-native-config 告诉 RN 哪个 .env 文件要查看 im，就像 $env:ENVFILE=".env.mycustomenv" (在使用 powershell 的 Windows 上)。

react-native-config 应该可以将上面的那些变量暴露给您的 .js 文件，它确实可以，但根据我的经验，它在使用产品 flavor 时不起作用。所以我开始使用 react-native-build-config 来完成这个任务。所以最后我的代码看起来像这样:

import BuildConfig from "react-native-build-config"

export function MainStyle () {

  return(
    <>
      <StatusBar barStyle={`${BuildConfig.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={BuildConfig.LOGIN_BACKGROUND_COLOR} />
      <TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
    </>
  )
}

等等……

我希望这个答案能帮助发现这篇文章并寻求帮助的其他开发者。