如何在react-native中编写风味特定的代码？

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

因此，在过去的几天里，我尝试学习如何从同一个项目构建多个应用程序...（这里主要关注 Android）在我的旅程中，我找到了一些指南，并设法通过以下方式使其工作本指南 https://medium.com/@ywongcode/building-multiple-versions-of-a-react-native-app-4361252ddde5并在我的 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 个）不同的构建。

但是，由于我是一个初学者，所以我找不到正确的方法来编写特定风格的代码，以便在我为特定风格构建时呈现。

另外，我还关注了这另一本指南 https://hackernoon.com/setting-up-android-like-product-flavors-in-react-native-39b6c011061b这或多或少展示了如何做到这一点，但同样，我缺乏正确执行某些步骤的知识，所以我失败了。我不知道应该在哪个文件中修改代码STEP 2也不是什么BuildConfig.FLAVOR, NSBundle.mainBundle()，并且在STEP 3 UtilityManager.getTarget(), RNBuildConfig.FLAVOR

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

我在写这篇文章时使用的解决方法（这非常重要）是： 产品风味 (Android) 和 XCode 方案 (iOS) 用于构建具有不同名称和图标的不同应用程序。

为了编写特定风格/方案的代码，我使用环境变量。我使用所需的配置变量创建了多个 .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"

告诉 RN 要查看哪个 .env 文件，我使用react-native-config从命令行很简单$env:ENVFILE=".env.mycustomenv" （在 Windows 上使用 powershell）.

react-native-config应该可以将上面的这些变量公开给您的 .js 文件，而且确实如此，但根据我的经验，在使用产品风格时它不起作用。所以我开始使用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>
    </>
  )
}

等等等等……

我希望这个答案可以帮助其他发现这篇文章寻求帮助的开发人员。