如何正確使用環境變量？

Question

我正在開發一個白標應用程序，我想知道如何使用環境變量為不同的環境/構建生成特定的顏色值和源圖像。

我使用react-native-config能夠為我的代碼特定構建操作/使用 env 變量。

//.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} （無引號）