2021年Cordova+React安卓应用在模拟器设备实现热重载的问题问询

该方案亲测2021年及后续版本均可正常使用，既支持热重载，也能完整调用Cordova提供的所有设备原生特性，无需每次执行打包安装命令。

• 第一步：配置开发阶段网络权限
  首先修改项目根目录的config.xml，在<platform name="android">节点下添加配置：

  <preference name="CleartextTraffic" value="true" />
  

  该配置仅用于开发阶段放开明文HTTP请求限制，正式打包上线前请删除。
  其次修改React项目public/index.html中的CSP元标签，将本地电脑的局域网IP、React开发服务端口、热重载Websocket端口加入放行规则，示例如下（替换为你自己的电脑IP）：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://192.168.1.5:3000 ws://192.168.1.5:3000 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
  

• 第二步：修改Cordova入口地址
  开发阶段将config.xml中的默认入口配置：
  <content src="index.html" />
  临时替换为你的React开发服务地址：
  <content src="http://192.168.1.5:3000" />
  确保安卓设备/模拟器和你的电脑处于同一局域网环境下，如果使用安卓模拟器，也可以将IP替换为安卓模拟器默认宿主机地址10.0.2.2
• 第三步：配置React开发服务器允许外部访问
  在React项目根目录新建.env文件，添加配置：
  HOST=0.0.0.0
  确保React开发服务可以被局域网内其他设备访问。
• 第四步：按顺序启动服务
  1. 先启动React开发服务：npm start
  2. 新开终端执行Cordova安装命令，将应用安装到安卓设备/模拟器：cordova run android
     后续修改React代码后，会自动触发热重载，直接在安卓设备的Cordova容器内生效，所有Cordova原生插件功能均可正常调用，无需重复执行安装命令。

注意：正式打包上线前，需要将config.xml中的入口地址改回index.html，删除CleartextTraffic配置，同时将CSP规则替换为生产环境规则即可。

内容的提问来源于stack exchange，提问作者olekskop