react-native踩坑记,三天时间

浏览:172

前几天学习react 感觉还是不错的 虽然个人觉得前端框架都比较费事,但是,顺应大局,还是得学习学习,然后简单学习了一下,发现还有比react更好玩的东西,比如他的native,基于虚拟dom技术,省了好多事情,无奈,之前玩cordova 就被坑了好多次,这次同样,不过,个人觉得,多踩坑是好事,至少在进步,就说这么多,马上进入正文 。
1.环境准备。


(1) node.js npm;


(2) java jdk;


(3) android sdk ;


(4) windows 系统电脑;
2.知识积累。


(1) node.js 简单安装以及npm使用;


(2) java jdk 会配置使用环境变量;


(3) android sdk 会配置使用环境变量;


(4) windows 系统电脑 能翻墙的vpn;


注:android sdk 和java jdk我都会上传百度云盘 这是最麻烦的两个东西


注:node版本在4.x.x以上 npm跟着就有了 不用管他
3.node.js


(1)node的安装非常简单,直接去官网下载一个 但是要注意系统版本32位还 是64位;附上node官网下载地址 https://nodejs.org/en/ 安装过程省略,此处略去200字


(2)安装完开始菜单下会有几个东西 上个图图瞅瞅图片描述


然后 点击第一个 会进入cmd的命令行,


然后键入以下命令node -v就会出现node的版本号


继续键入命令npm -v 会出现npm的版本号,


到此为止,node安装成功。


注:node开启的命令行和windows开启的命令行本质是一样的,但是node命令行跟随启动的还有node的运行环境,随后会体验到这个的便捷;
4 java jdk安装


(1) java 是一个小坑,不过小心一点就可以一次搞定;react官方要求是18版本以上,得找对jdk安装包,不然,后患无穷啊


(2) 附上官网地址http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2... 找合适自己的安装包进行安装


(3) 安装很简单 马上就成功了 然后很重要的一步 配置环境变量


-->点击这台电脑-->


-->点击右键-->


-->属性-->


-->左边有一个高级系统设置-->


-->进入后上面有一个高级点击后-->


-->下方有一个环境变量-->


-->然后有系统变量-->


-->然后滑动找找左边会有path名字的-->


-->点开瞅瞅-->


会发现有一堆东西,然后找到java的安装目录


C:\Program Files (x86)\Java\jdk1.8.0_25\bin


注:这里会有歧义,有的人会配置一个JAVA_HOME的变量,其实道理一样的,咱们这里就配置一个java,所以不需要那么复杂,还有一点,必须找到java安装目录下的bin文件夹,多个环境变量,需要加分号;
图片描述图片描述


(4) 配置完成后,打开命令行吗,键入java,会出现一堆说不清楚的东西,这样就安装成功了,在我上传的java安装包,键入javac也会有一堆东西,至此为止,java也搞定了。


5 Android sdk安装


(1) android sdk就是安装的运行环境,可以搭建基础的安卓环境,这个是本次安装的重点。


(2) 下载android sdk 说实话,我是用的别人给我的,然后自己又下载了一些,一会会贴上下载地址,还有一种是用android-studio,这个我不太会用,有兴趣的可以自己研究一下


(3) 下载好之后解压,会有好多目录,比如很重要的platform-tools 还有tools等等,目录就不解释了,直接配置环境 变量。


(4) 先把解压好的文件放在一个地方,但是需要注意的是,需要英文目录,中文目录会有各种小问题,咱们应该把问题扼杀在摇篮里。


(5) 然后打开之前配置java环境变量的地方,然后这里因为需要配置一个环境两个环境变量,咱们这里就写一个公共的变量 系统变量下方有一个新建,然后出来两个输入框 第一个输入ANDROID_HOME 这个,第二个就是android sdk的目录了 我这里在d盘 我就可以这么写D:\sdk,然后保存,继续操作,打开path,配置如下变量


%ANDROID_HOME%\platform-tools\;


%ANDROID_HOME%\tools\;


一看就懂 ,还是需要注意分号,然后保存,不出意外的话,打开命令行,键入以下命令,android,会启动android sdk;然后按键盘ctrl+c 两次就会停止,然后继续键入adb 会出现一堆东西,出来就好啦,然后说明配置正确。


附两张图
图片描述
图片描述


(6) 走到这一步,其实可以连接手机,安装手机助手,安装手机驱动,然后在命令行键入adb devices,会出现你的设备,手机需要开启开发者模式,还有USB调试,这一部分需要百度一下,还可以打开设备管理器,有如下图的设备出现,就OK啦
图片描述


(7) android sdk比较重要的几个文件;


命令行键入android 启动android sdk 来看哪几个重要的文件 如下图所标注
图片描述
图片描述
图片描述


(8) 如果android sdk下没有的需要下载,点击前面复选框,然后按如下步骤操作
图片描述
5 react-native安装


(1) 打开node命令行,键入一下命令npm install -g react-native-cli


然后静静的等待吧;需要稍微长一点时间


(2) 完成后,切换到工作目录 初始化项目


在node命令行下继续键入以下命令react-native init app,


init后面的名字可以随意写,英文最好。


然后上图,需要很长时间
图片描述


(3) 然后cd app 进入项目目录,连接手机,运行react-native run-android;


此处需要vpn,会跟随启动一个react packager的服务。


(4) 静静等待,等待,吃了个饭回来,发现,命令行多了好多东西,比如是这样,我的手机型号。
图片描述


手机上是这样子,安装成功,如果出现白屏,可以打开应用管理,会有一个允许在其他应用的上层显示,允许就好啦。或者会出现红色屏幕,应该是手机跟pc断开了,手机摇一摇,出现弹窗,选择最后一个,进入后再选择最后一个,会弹出一个框,需要输入你本机的ip,还有默认端口号:8081,比如我的电脑192.168.10.142:8081,然后,确定,继续摇一摇,出来弹窗,点击第一个,就出来啦。


图片描述


(6) 附上java jdk和android sdk的安装包;


java jdk:链接: http://pan.baidu.com/s/1dFyU621 密码: av6j;


android:链接: http://pan.baidu.com/s/1jIQ4FEA 密码: zp7t


(7) 常见的安装问题以及解决方法会在下次贴出。




top