前端web项目做的比较多,最近捣鼓了一下移动端的开发,因为最先接触的就是react嘛,所以就从react native下手,这不看不知道,一看就劝退啊,搭环境是真的麻烦,所以就我个人踩过的坑来记录一下哈哈
设备:
- 电脑(我用的win10)
- 手机(我这里用的是基于android5.1.1的安卓机)
- 可以传输数据的数据线一根(连接手机和电脑)
注意:有的数据线是只能充电,不能传输数据的,要注意检查一下
搭建步骤:(以下以win10 + android平台为例)
-
电脑环境的准备
Node,JDK
Node 的版本应大于等于 12,而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)
这里node环境和jdk的安装就不细说了,网上都有详细的教程,注意版本就行了。 -
Android Studio
image.png
根据 React Native 中文网 的搭建步骤,还要安装一个叫Android Studio的软件用来获得编译 Android 应用所需的工具和环境,暂时先根据官方文档来吧
咱先下载一个安装包,地址可以用官网提供的 Android Studio下载地址
下载完就点击安装,就正常安装,没什么要设置的,
下面这里建议把 Android virtual Device(虚拟机安装文件)也勾选上
image.png软件安装路径设置,默认还是自己设置都行,你开心就好...
image.png接下来就等它安装完成就好
3.Android SDK
!!!最重要也是最麻烦的一步来了!!!
官网明确表示了译注:请注意!!!国内用户必须必须必须有稳定的代理软件,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。某些代理软件可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,那么 99% 就是无法正常连接网络。
所以先准备正常连接网络
配置dl.google.com的国内镜像源
打开一个 ping检测网址
然后输入dl.google.com进行检测
在结果列表中选择一个响应时间最短的IP
image.png打开电脑上的host文件(路径:C:\Windows\System32\drivers\etc\host),添加映射
image.png然后打开cmd,输入ping dl.google.com,能ping通就表示没问题了
根据官网步骤,打开刚刚安装完的Android Studio,它会弹框显示找不到Android sdk列表,点击Cancel
image.png然后会显示找不到找到Android sdk,点击Next
image.png这里都勾上了,下面可以设置一个Android sdk安装目录,也可以默认,继续Next
image.png继续下一步
image.png安装
image.png完成
image.png如果一切正常的话,到这里环境就算搭好了,可是偏偏意外就那么多,不知道是目录问题还是网络问题,我在下载sdk那里始终是失败的...设置网络代理也不行,然后在设置里设置sdk目录的下面提示 'the android sdk location cannot be at the filesystem root',这提示属实没看懂...我设置了好多目录路径都不行啊,算了,Android Studio下不了,咱自己下载sdk。
我自己在找了个工具环境挺全的地址 AndroidDevTools
进入网站,下载一个包含SDK manager的SDK工具包
这里推荐下载zip包,直接解压到自己设置的sdk目录就可以用了,很方便
解压后有一个SDK Manager.exe,点击运行
然后下载对应的sdk环境资源就好了,关于下载哪些环境和配置环境变量,可以参考 Android SDK 安装及环境配置教程
上面的弄好之后,直接回到Android Studio设置sdk目录那里,指定目录为刚刚SDK Manager所在目录,然后环境搭建就算做好了,可以试着进行项目开发了。
- 搭建新项目
根据官网流程,可以使用react native内置模板去创建初始化项目
先安装react native依赖
npm i react-native
然后新建初始化项目FirstAndroid
npx react-native init FirstAndroid
项目创建完后不着急运行,先连接上我们准备的android/ios设备
- 连接设备
用数据线连接电脑和设备
这时候打开命令窗口,运行命令
$ adb devices
List of devices attached
9d67bce2 device
如上,如果看见列表中存在设备,则连接成功,否则检查问题
- 数据线是否可以传输数据
- 手机的调试模式是否打开
- 手机是否显示连接了电脑
- 运行项目
进入项目目录,使用yarn命令启动项目
cd FirstAndroid
yarn android
# 或者
yarn react-native run-android
#或者
npx react-native run-android
如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的代理软件,否则将频繁遭遇链接超时和断开,导致无法运行。
我在这里的时候中间出了error日志,根据日志提示,sdk android版本不匹配,然后我打开SDK Manager又下载了对应版本的android,之后就成功了,这里出问题不要怕,根据日志去寻找问题解决问题就好
注意:在启动过程中,时刻观察命令窗口的日志和手机屏幕,过程中会弹出一个node窗口用于控制项目,当启动命令窗口到了app:installDebug这一步的时候,手机会弹出一个类似安装手机app时的安装界面,这是因为手机要安装app-debug.apk去运行项目,要手动点击安装,项目才会成功启动,否则项目会启动失败
当命令窗口显示如下,则项目运行成功
BUILD SUCCESSFUL in 45s
29 actionable tasks: 2 executed, 27 up-to-date
info Connecting to the development server...
info Starting the app on "9d67bce2"...
Starting: Intent { cmp=com.firstandroid/.MainActivity }
这时候手机界面也是咱的项目界面啦。综上,如果你不用Android Studio编辑代码/启动代码的话,Android Studio暂时也就没啥用了,啊哈哈...
网友评论