Question

我正在开发一个白色标签应用程序，我想知道如何使用环境变量来为不同的环境/构建生成特定的颜色值和源图像。

我正在使用react-native-config来针对我的代码特定版本来操纵/使用环境变量。

//.env.fistapp
APP_BUILD=Environment-firstapp

LOGIN_LOGO_IMAGE=./images/1Logo.png

LOGIN_SOME_BOOL=true

LOGIN_BACKGROUND_COLOR=#333
LOGIN_SIMPLE_TEXT_COLOR=#FFF
LOGIN_TEXTINPUT_BACKGROUD_COLOR=#FFF
LOGIN_LOGIN_BUTTON_COLOR=#009933

对于颜色值，其工作原理如下：

<View styles={background: ${Config.LOGIN_BACKGROUND_COLOR}}/>

对于布尔值，我不知道执行此操作的正确方法。.env变量始终为string，所以我认为解决方法是：

<Switch value={Config.LOGIN_SOME_BOOL === "true"}/>

但是我无法获取源图像。我得到：

Invalid call at line 18: require(_reactNativeConfig.default.LOGIN_LOGO_IMAGE) at C:\Users\myuser\Desktop\myproject\whitelabel\node_modules\metro\src\JSTransformer\worker.js:318:19

我已经尝试了所有这些方式：

import Logo from Config.LOGIN_LOGO_IMAGE

import Logo from `${Config.LOGIN_LOGO_IMAGE}`

const Logo = Config.LOGIN_LOGO_IMAGE

<Image source={require(Config.LOGIN_LOGO_IMAGE)}/>

<Image source={{uri: require(Config.LOGIN_LOGO_IMAGE)}}/>

Answer 1

我认为您需要将此字符串用引号引起来：LOGIN_LOGO_IMAGE="../../images/1Logo.png"。至于布尔值，请打印出typeof(Config.LOGIN_SOME_BOOL)，如果它是布尔值，则需要执行{Config.LOGIN_SOME_BOOL === true}（无引号）

Answer 2

我发现了需要图像源的问题。在RN中，所有导入都在编译时进行了静态分析，并且必须是简单的字符串，而不是动态表达式。

仍在寻找解决方法，但是既然问题是孤立的，我想我会找到一个相当容易的解决方案...

我发现this article有可能的解决方案，但我会继续寻找。

如何正确使用环境变量？

2 个答案: