如何在 react-native 中编写特定于风味的代码?
How do I write flavor specifc code in react-native?
大约一周前,我开始开发一个白标应用程序,其中唯一不同的应用程序是一些颜色值、图像源和 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)不同的构建.
但是,由于我是一个初学者,所以我找不到编写特定风味代码的正确方法,以便在我为特定风味构建时呈现。
此外,我遵循 this other guide 或多或少地展示了如何做到这一点,但同样,我缺乏正确执行某些步骤的知识,所以我在那里失败了。我无法弄清楚我应该在哪个文件中纠正 STEP 2 的代码,而不是 BuildConfig.FLAVOR
、NSBundle.mainBundle()
和 STEP 3 的代码 UtilityManager.getTarget()
, RNBuildConfig.FLAVOR
总之..我仍在努力学习成长,我会更深入地研究环境变量...但我觉得有必要向社区寻求帮助。
我在 post (这很重要) 时使用的解决方法是:
产品风味 (Android) 和 XCode 方案 (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 文件就像 $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>
</>
)
}
等等……
我希望这个答案能帮助其他发现此问题的开发者 post 寻求帮助。
大约一周前,我开始开发一个白标应用程序,其中唯一不同的应用程序是一些颜色值、图像源和 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)不同的构建.
但是,由于我是一个初学者,所以我找不到编写特定风味代码的正确方法,以便在我为特定风味构建时呈现。
此外,我遵循 this other guide 或多或少地展示了如何做到这一点,但同样,我缺乏正确执行某些步骤的知识,所以我在那里失败了。我无法弄清楚我应该在哪个文件中纠正 STEP 2 的代码,而不是 BuildConfig.FLAVOR
、NSBundle.mainBundle()
和 STEP 3 的代码 UtilityManager.getTarget()
, RNBuildConfig.FLAVOR
总之..我仍在努力学习成长,我会更深入地研究环境变量...但我觉得有必要向社区寻求帮助。
我在 post (这很重要) 时使用的解决方法是: 产品风味 (Android) 和 XCode 方案 (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 文件就像 $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>
</>
)
}
等等……
我希望这个答案能帮助其他发现此问题的开发者 post 寻求帮助。