Android Studio 运行 React Native 起步和踩坑

枕上从妨一夜睡,灯前读尽十年诗。这篇文章主要讲述Android Studio 运行 React Native 起步和踩坑相关的知识,希望能为你提供帮助。
一、参考教程,搭建环境教程地址:http://reactnative.cn/docs/0.48/getting-started.html
参考视频教程,有以下几点不同:
(视频教程地址:https://ke.qq.com/webcourse/index.html#course_id=197101& term_id=100233637& taid=1220874518856173& vid=d1417tgg1ez)
1. Chocolatey 不需要安装。
2. 跳过个性化设置,直接打开欢迎界面的配置 Configure -> SDK Manager (也可随后在软件界面的 File -> Settings 中打开)。
只需勾选安装以下三个选项即可。

Android Studio 运行 React Native 起步和踩坑

文章图片
Android Studio 运行 React Native 起步和踩坑

文章图片

Android Studio 运行 React Native 起步和踩坑

文章图片
Android Studio 运行 React Native 起步和踩坑

文章图片
Android Studio 运行 React Native 起步和踩坑

文章图片

 
二、使用模拟器调试及报错 1、Your CPU do not support NX.Unfortunately, your computer does not support hardware accelerated virtualization.
在 android Studio 上启动模拟器,一直处于启动状态。
【解决方法】
新增模拟器时,选择 Other Images,并且选择 ABI 为 arm 的(64位系统必须为 arm64)
 
Android Studio 运行 React Native 起步和踩坑

文章图片
Android Studio 运行 React Native 起步和踩坑

文章图片

Android Studio 运行 React Native 起步和踩坑

文章图片

 
2、Unable to load script from assets \'index.android.bundel\'. Makve sure your bundel is packaged corredtly or you\'re running a packager server.
Android Studio 运行 React Native 起步和踩坑

文章图片

【其他解决方案】
1、(in project directory) mkdir android/app/src/main/assets
2、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
3、react-native run-android
https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows
确保以下路径中有这两个文件即可:
Android Studio 运行 React Native 起步和踩坑

文章图片

 
3、Excecution failde fro task \':app:complieDebugjavaWithJavac\'.Could not find tools.jar.
Android Studio 运行 React Native 起步和踩坑

文章图片

【原因】
在安装java包时,会遇到两次路径选择,第一次时选择jdk的路径,第二次是选择jre的路径,如果所选择的jdk安装路径和jre的安装路径相同,那么jre包中的内容会覆盖掉jdk中的内容,所以,在你安装完成之后,会发现找不到tools.jar和dt.jar包。
【解决方案】
在安装的过程中,jdk和jre要安装在不同的文件下,比如jdk安装在“d:/java/jdk"下面,jre安装在“d:/java/jre"下面。
 
4、could not connect to development server
Android Studio 运行 React Native 起步和踩坑

文章图片
Android Studio 运行 React Native 起步和踩坑

文章图片

  【解决方案】
在模拟器中按 Ctrl+M ,打开调试工具(Dev Settings),点击  Debug server host & port for device,设置为  localhost:8081。 
自己新建的项目通过上述方法解决了,但是另外个公司里开发的项目还是没解决,一直卡这里了。
  5、Command `yarn add react-native --exact` failed.
【Android Studio 运行 React Native 起步和踩坑】重新注册镜像地址
npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist

 
6、Application xxx has not been registered
Android Studio 运行 React Native 起步和踩坑

文章图片

【解决方案】
莫名其妙好了……
 
7、Process system isn\'t responding, Close app or Wait ? 点击两个按钮都没反应。
Android Studio 运行 React Native 起步和踩坑

文章图片

  【解决方案】
在  Android Studio 中打开项目中的  Android 文件夹,等待几分钟的编译过程后,若提示更新  gradle 插件,则立即更新,然后点击运行,选择相应的模拟器。
模拟器打开后,也会出现这个画面,但是点击 Close app 后就能运行程序,正常使用了。
悲剧是的,后来再次打开,又出现这个情况。
网上看到有人解释说:“这个问题在模拟器上比较常见,意思是system这个进程没有响应,一般是因为模拟器运行速度太慢,导致系统不能启动。建议换个好点的电脑。”
还是弃用模拟器,转用真机吧……
 
  8、Module HMRClient is not a registerd callable module
Android Studio 运行 React Native 起步和踩坑

文章图片

【解决方案】
在Dev Setting里面设置正确的IP。
参考文章:http://www.jianshu.com/p/fbcce5159d77
问题是我不知道正确的IP到底该设什么!


作者:gzfgeh
链接:http://www.jianshu.com/p/fbcce5159d77
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 
Tips: 1、创建指定版本的  React-Native 工程
react-native init MyApp --version 0.44.3   (注意版本号必须精确到两个小数点。)
2、修改App名称
一般Android在打包的时候,如果没经过修改,那么应用显示的名称就是我们在react-native init时设定的名称,那么,如何修改呢?
step1:我们打开项目的android/app/src/main/AndroidManifest.xml文件可以看到名称的设定:
Android Studio 运行 React Native 起步和踩坑

文章图片
这说明app的显示名称在@string/app_name中进行了设定。
step2:那我们直接继续打开android/app/src/main/res/values/strings.xml,即可看到配置中的app_name,修改为你想要的即可,如:
Android Studio 运行 React Native 起步和踩坑

文章图片
 
3、修改模拟器调试服务地址和端口,及如何同时运行多个React Native项目
http://blog.csdn.net/fengyuzhengfan/article/details/77389953
4、优化  Android Studio 
http://bbs.itheima.com/thread-204217-1-1.html 
申请大内存
installation path\\studio64.exe.vmoptions or studio.exe.vmoptions
使用文本编辑器打开,找到起始两行,如下
-Xms128m
-Xmx750m
修改最小值和最大值,建议为
-Xms256m
-Xmx2048m
 
 
三、使用安卓真机调试及报错 
(一)配置步骤:
参考:http://reactnative.cn/docs/0.50/running-on-device-android.html
配置运行:
1、打开ANDOID_HOME 的环境变量的文件夹下的 /android/sdk/platform-tools 文件夹,在此目录下运行命令  adb reverse tcp:8081 tcp:8081
2、设置手机:开发人员选项 - USB调试 - 勾选
3、将手机通过USB连接上电脑,在电脑上运行命令  adb devices,查看是否已连上。
4、打开项目,运行 react-native run-android 即可在手机安装并打开app(运行方法一 推荐)。
  运行方法二:
1、在  Android Studio 中打开项目中的 Android 文件夹,等待几分钟的编译过程后,若提示更新  gradle 插件,则立即更新。
2、点击运行,在 Select Deployment Target 对话框中选择相应的设备,即可在真机上操作。
 
Android Studio 运行 React Native 起步和踩坑

文章图片

 
(二)报错及解决方案
1、Android Studio 连接  Android 真机,找不到设备 
Android Studio 运行 React Native 起步和踩坑

文章图片

  【解决方案】
1.手机连上电脑以后,自动连接手机助手,导致adb被占用,以至于AS无法检测到设备,只要把该手机助手的进程关闭就好了。 
2.当发现adb工具无法使用或出现异常时,可以考虑输入以下命令,重新对adb服务关闭和重启:
adb kill-server adb start-server

Tips:列出当前与电脑连接的设备:
adb devices

  3.其他解决方案参考  https://www.zhihu.com/question/30588024
 
2、Device supports, but APK only supports armeabi-v7a, x86
Android Studio 运行 React Native 起步和踩坑

文章图片

【解决方案】
1、重启  Android Studio 
2、项目的 android -> app 文件夹中的  build.gradle 文件,删除以下配置
ndk { abiFilters "armeabi", "armeabi-v7a", "x86" }

参考文章:https://stackoverflow.com/questions/41775988/what-is-the-reason-for-the-error-device-supports-x86-but-apk-only-supports-arm
 
3、Could not connect to development server
【解决方案】
点击菜单或者摇一摇手机,点击Dev  Settings后,点击Debug  server  host  &   port  for  device,设置为localhost:8081。
 

    推荐阅读