如何将Node环境变量传递给React Native JS代码

在React Native中，可以通过使用React Native的内置模块react-native-config来将Node环境变量传递给JS代码。

以下是实现的步骤：

1. 在React Native项目的根目录下，使用npm或者yarn安装react-native-config模块：

npm install react-native-config --save

或者

yarn add react-native-config

1. 在React Native项目的根目录下，创建一个名为.env的文件，用于存储环境变量。在该文件中，可以定义各种环境变量，例如：

API_URL=https://api.example.com

API_KEY=1234567890

注意：.env文件中的环境变量应该按照KEY=VALUE的格式进行定义。

1. 在React Native项目的根目录下，创建一个名为babel.config.js的文件，用于配置Babel。在该文件中，添加以下代码：

module.exports = {

presets: ['module:metro-react-native-babel-preset'],

plugins: [

[

'module:react-native-dotenv',

{

moduleName: '@env',

path: '.env',

blacklist: null,

whitelist: null,

safe: false,

allowUndefined: true,

},

],

],

};

1. 在React Native项目的根目录下，运行以下命令来生成一个名为react-native.config.js的文件：

npx react-native config

1. 在React Native项目的根目录下，打开android/app/build.gradle文件，在dependencies块中添加以下代码：

implementation project(':react-native-config')

1. 在React Native项目的根目录下，打开android/settings.gradle文件，添加以下代码：

include ':react-native-config'

project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')

1. 在React Native项目的根目录下，打开MainApplication.java文件，导入react-native-config模块，并将其添加到getPackages()方法的返回值中，如下所示：

import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;

// ...

@Override

protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

List<ReactPackage> packages = new PackageList(this).getPackages();

// ...

packages.add(new ReactNativeConfigPackage());

// ...

return packages;

}

1. 在React Native项目的根目录下，运行以下命令来重新编译项目：

npx react-native run-android

或者

npx react-native run-ios

现在，你可以在React Native的JS代码中使用react-native-config模块来访问Node环境变量。例如，可以通过以下方式获取之前定义的环境变量：

import Config from 'react-native-config'; const apiUrl = Config.API_URL; const apiKey = Config.API_KEY; // 使用环境变量进行API调用等操作

这样，你就成功将Node环境变量传递给React Native的JS代码了。