我正在使用react-native来构建一个跨平台的应用程序,但我不知道如何设置环境变量,以便我可以有不同的常量为不同的环境。
例子:
development:
BASE_URL: '',
API_KEY: '',
staging:
BASE_URL: '',
API_KEY: '',
production:
BASE_URL: '',
API_KEY: '',
我正在使用react-native来构建一个跨平台的应用程序,但我不知道如何设置环境变量,以便我可以有不同的常量为不同的环境。
例子:
development:
BASE_URL: '',
API_KEY: '',
staging:
BASE_URL: '',
API_KEY: '',
production:
BASE_URL: '',
API_KEY: '',
当前回答
遵循以下步骤
NPM安装react-native-dotenv 用一些变量名设置。env文件,例如APP_NAME="my-app" 修改bable.config.js
模块。出口= { 预设:['模块:metro-react-native-babel-preset '), 插件:[ ["模块:react-native-dotenv ", { :“envName APP_ENV”, :“moduleName @env”, “路径”:“.env”, “安全”:假的, “allowUndefined”:没错, “详细”:假的 }) ] };
重新启动所有应用程序 尝试从“@env”导入{APP_NAME}。如果这不起作用,那么执行这个const APP_NAME = process.env['APP_NAME'];
欢呼:)
其他回答
我认为像下面这样的库可以帮助您解决谜题中缺失的部分,即getPlatform()函数。
https://github.com/joeferraro/react-native-env
const EnvironmentManager = require('react-native-env');
// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
.then(val => {
console.log('value of SOME_VARIABLE is: ', val);
})
.catch(err => {
console.error('womp womp: ', err.message);
});
我所看到的唯一问题是,这是异步代码。有一个拉请求来支持getSync。也来看看吧。
https://github.com/joeferraro/react-native-env/pull/9
[来源]从我的发现来看,默认情况下,它只可能做生产和开发配置(没有登台或其他环境)-对吗?
现在,我一直在使用一个environment.js文件,可以用来检测博览会发布通道,并根据此更改返回的变量,但对于构建,我需要更新返回的非DEV变量为staging或prod:
import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
dev: {
apiUrl: localhost,
},
staging: {
apiUrl: 'https://your-staging-api-url-here.com/'
},
prod: {
apiUrl: 'https://your-prod-api-url-here.com/'
},
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
// What is __DEV__ ?
// This variable is set to true when react-native is running in Dev mode.
// __DEV__ is true when run locally, but false when published.
if (__DEV__) {
return ENV.dev;
} else {
// When publishing to production, change this to `ENV.prod` before running an `expo build`
return ENV.staging;
}
}
export default getEnvVars;
选择
谁有在用expo构建的项目中使用react-native-dotenv的经验?我很想听听你的想法
https://github.com/goatandsheep/react-native-dotenv
遵循以下步骤
NPM安装react-native-dotenv 用一些变量名设置。env文件,例如APP_NAME="my-app" 修改bable.config.js
模块。出口= { 预设:['模块:metro-react-native-babel-preset '), 插件:[ ["模块:react-native-dotenv ", { :“envName APP_ENV”, :“moduleName @env”, “路径”:“.env”, “安全”:假的, “allowUndefined”:没错, “详细”:假的 }) ] };
重新启动所有应用程序 尝试从“@env”导入{APP_NAME}。如果这不起作用,那么执行这个const APP_NAME = process.env['APP_NAME'];
欢呼:)
我已经为相同的问题创建了一个预构建脚本,因为我需要一些不同环境的不同API端点
const fs = require('fs')
let endPoint
if (process.env.MY_ENV === 'dev') {
endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
endPoint = 'http://127.0.0.1:7001'
} else {
endPoint = 'http://my-api-pro/api/v1'
}
let template = `
export default {
API_URL: '${endPoint}',
DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`
fs.writeFile('./src/constants/config.js', template, function (err) {
if (err) {
return console.log(err)
}
console.log('Configuration file has generated')
})
我已经创建了一个自定义的npm运行脚本来执行反应本机运行..
我package-json
"scripts": {
"start-ios": "node config-generator.js && react-native run-ios",
"build-ios": "node config-generator.js && react-native run-ios --configuration Release",
"start-android": "node config-generator.js && react-native run-android",
"build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
...
}
然后在我的服务组件中导入自动生成的文件:
import config from '../constants/config'
fetch(`${config.API_URL}/login`, params)
不要传递像VAR=value react-native run-android或VAR=value react-native run-ios这样的变量。这些变量只有当我们在开始命令中传递它们时才可以访问,即VAR=value react-native start——reset-cache。
你可以通过3个简单的步骤来实现这一点:-
通过运行npm i babel-plugin-transform-inline-environment-variables——save-dev安装babel-plugin-transform-inline-environment-variables。 在.bablerc或babel.config.js中添加"plugins": ["transform-inline-environment-variables"] 在启动metro bundle时传递变量,即VAR=value react-native start -reset-cache,不要在react-native run-android或react-native run-ios命令中传递这些变量。
请记住,使用——reset-cache标志是必需的,否则变量的变化将不会被应用。