babel-plugin-react-native-config 是一个用于 React Native 应用的 Babel 插件，让你能够在运行时通过环境变量配置应用程序。这个插件能够帮助你动态配置应用程序，并根据环境变量编译出不同的代码版本。这里是一篇详细的教程，帮助你快速上手使用这个 npm 包实现应用程序的配置。
安装
yarn add babel-plugin-react-native-config --dev
或者使用 NPM：
npm install --save-dev babel-plugin-react-native-config
配置
在项目的根目录下创建 .env 文件，配置如下：
APP_NAME=My Cool App API_BASE_URL=http://api.example.com
在 .babelrc 文件中添加 plugin 配置如下：
{
"presets": ["@babel/preset-react"],
"plugins": ["react-native-config"]
}这个 plugin 会将 .env 文件的键-值对注入到应用程序的环境变量中。比如，process.env.APP_NAME 将等同于 "My Cool App"。你也可以在运行时使用 Config.get(key) 方法获取这些配置项。
示例
考虑下面这个非常简单的例子：
import Config from 'react-native-config'
console.log(`App name: ${Config.APP_NAME}`)如果你没有安装并配置该插件，上面的代码会抛出一个 ReferenceError 错误，因为 Config 没有定义。
假设你已经根据上面的步骤在项目中配置了 babel-plugin-react-native-config 这个 Babel 插件。现在，运行上面的代码会输出：
App name: My Cool App
你还可以启动不同的代码版本：
.env.development APP_NAME=My Cool Dev App .env.production APP_NAME=My Cool Prod App
在运行时运行下面的代码：
if (__DEV__) {
console.log(`App name: ${Config.get('APP_NAME')}`)
} else {
console.log(`App name: ${Config.get('APP_NAME')}`)
}开发环境下，它会输出 My Cool Dev App，而生产环境会输出 My Cool Prod App。由于没有在正式环境中设置 __DEV__，所以插件会将其默认为“false”。
总结
babel-plugin-react-native-config 是一个非常实用的工具，可以让你在不同的环境中为 React Native 应用程序进行配置。通过这篇文章，你已经学会了如何配置这个插件，并使用它从 .env 文件中读取环境变量。
这个插件非常容易上手，可以帮助你的 React Native 项目更加灵活和可定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005547981e8991b448d1bf6