如何在 react-native 中编写特定于风味的代码? [英] How do I write flavor specifc code in react-native?

问题描述

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

About a week ago I starded developing a white-label app, where the only thing that will differ from app to app are some color values, source of images and API endpoints, but the app itself does the exact same thing.

所以最近几天我试着学习如何从同一个项目构建多个应用程序......(让我们主要关注 Android 在这里)通过我的旅程，我找到了一些指南，我设法通过遵循本指南和设置产品我的 build.gradle 中的口味.

So the last couple of days I tryied to learn how to build multiple apps from the same project... (lets mainly focus on Android here) thru my journey I found a few guides and I managed to make it work by following this guide and setting product flavors in my 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 个)不同的构建.

Ok, now I can runreact-native run-android --variant=firstappDebug to emulate the app while developing, and latter on release gradlew assembleFirstappRelease and be able to generate multiple (in this case 2) different builds.

但是，作为一个初学者，我找不到合适的方法来编写特定于特定风格的代码，以便在我为特定风格构建时呈现.

But, as im quite a begginer, I couldnt find the proper way to write flavor specific code to be rendered whenever I build for that specific flavor.

另外，我关注了这个其他指南 或多或少显示了如何做到这一点，但同样，我缺乏正确执行某些步骤的知识，所以我在那里失败了.我不知道应该在哪个文件中修正 STEP 2 的代码，也不知道什么是 BuildConfig.FLAVOR、NSBundle.mainBundle()，并在 STEP 3 UtilityManager.getTarget(), RNBuildConfig.FLAVOR

In addition, I followed this other guide that more or less shows how to do that, but again, I lack knowledge to proper execute some steps so I failed there. I couldnt figure out in what file should I right the code at STEP 2 and neither what is BuildConfig.FLAVOR, NSBundle.mainBundle(), and at STEP 3 UtilityManager.getTarget(), RNBuildConfig.FLAVOR

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

In conclusion.. Im still studying hard to grow and Ill look more deeply in environment varibles... but I felt the need to ask the community for help.

推荐答案

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

The workaround I'm using at the time of this post (That's very important) is: Product Flavors (Android) and XCode Schemes (iOS) to build different apps with different names and icons.

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

To write code for specific Flavor/Scheme, I'm using environment variables. I created multiple .env files with the desired config variables. e.g.

//.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 文件，就像 $env:ENVFILE=.env.mycustomenv" (在 Windows 上使用 powershell).

To tell RN which .env file to look at im using react-native-config from the command line as simple as $env:ENVFILE=".env.mycustomenv" (On windows using powershell).

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

react-native-config should work to expose those variables above to your .js files, and it does, but for my experience it didn't work when using product flavors. So I started using react-native-build-config to do that task.. So in the end my code looks something like this:

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>
    </>
  )
}

依此类推...

我希望这个回答能帮助其他找到这篇文章寻求帮助的开发者.

I hope that this answer helps other devs that find this post looking to find help.

这篇关于如何在 react-native 中编写特定于风味的代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！