运行react-native中的android项目及问题解决

在命令行终端执行react-native init 项目名 命令后,创建RN项目,在RN项目中运行android的工程有两种方式:
第一种方式,使用webstorm打开RN项目,在webstorm工具的terminal终端中输入react-native run-android命令,webstorm会把android应用运行到设备或模拟器上
运行react-native中的android项目及问题解决_第1张图片
打开应用你可能会发现 报错: 红屏 "Could not get BatchedBridge, make sure your bundle is packaged correctly"
运行react-native中的android项目及问题解决_第2张图片
解决方案:打开设备悬浮窗,不同设备打开方式可能不一样,简单写两种设备的打开方式,一种是点击手机左下角菜单按钮打开悬浮窗,一种是要到手机的应用程序中去查找,之后可以在打开的程序中通过摇一摇手机打开悬浮窗。
运行react-native中的android项目及问题解决_第3张图片
打开悬浮窗之后,点击Dev Setting之后选择Debug serer host在弹出框中输入开启服务的ip和端口号(默认是8081)保存,回到程序页面再次打开悬浮窗点击reload即可成功运行程序。
运行react-native中的android项目及问题解决_第4张图片
第二种方式,通过android studio打开RN中的android项目并运行。
运行react-native中的android项目及问题解决_第5张图片
通过第二种方式打开android项目并运行不会自动的开启react-native服务,需要我们手动的去开启,如果react-native服务没有开启会报如下错误: Could not connect to development server.
运行react-native中的android项目及问题解决_第6张图片
出现这个问题我们需要手动的去开启服务,使用终端命令行工具cd进入到项目的根目录中,执行react-native start
运行react-native中的android项目及问题解决_第7张图片
再次通过android studio运行android项目到设备上,有可能会出现 "Could not get BatchedBridge, make sure your bundle is packaged correctly"这个错误通过上面提到的方法进行解决,即可成功运行程序。

如果还是报 Could not get BatchedBridge, make sure your bundle is packaged correctly这个错误可以尝试使用下面的方案进行解决,首先在RN项目的android->app->src->main目录下创建一个名为assets空文件夹,之后使用终端命令行进入到RN项目的根目录,执行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
命令,之后重启react-native服务,并重新运行android项目。
运行react-native中的android项目及问题解决_第8张图片
以上就是在RN项目中运行android工程的两种方式,在运行项目的过程中可能还会出现各种问题,在这里由于篇幅的原因就不一一列举了,会再开一篇记录在学习RN时遇到的各种问题及解决方案。

你可能感兴趣的:(react-native)