写的时候已经是2018年6月了,reactnative都出来好几年了,作为一个Android开发者,见识见识总是好的。本文也只是带你见识而已。
一、前提
在本地环境已经安装了nodejs,不必安装Python2,也不必非得使用sdk manager ,有nodejs安装就好。
二、安装
安装自然是要上官网查看的,这里po出官网,还有中文版的官网,虽然这中文版不太像官方的样子,但我没找到第二个了。
官网的区别
可以看见,在中文版里,少了一些东西,多了其他的东西(选择性接收就好),而且版本也不是最新(不重要),而少了的东西这里着重介绍。
在介绍之前,先依据中文网的提示,将npm换个资源地址。不然安装过程可能总是失败,或者巨慢。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
1、just ReactNative
英文官网里的quick start就是指这个,单纯的做ReactNative的开发,不涉及什么具体平台的内容。
具体操作可以看英文官网,这里总结一下:
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
这里用create-react-native-app来创建项目,用npm来运行项目服务器,用Expo(配合ReactNative开发的客户端)来作为执行环境。至于expo的作用,可以看他的官网来了解一下,客户端app也可以在官网下载即可。他就是为了ReactNative开发而生的。
至此,这环境就完了,然后使用expo,当npm start后,服务器开起来,根据提示可以扫码安装,也可以链接usb安装,不过我扫码没成功过,建议usb就好。而且他可以及时的更新界面(当更改了App.js后),简直厉害到不行。
2、with native code
这是两个网站都有的东西,就是可以以各平台app的形式运行,甚至是混合开发,而且中文网的内容更加针对我国国情,很有价值。
首先是安装,根据两个网站的显示,都建议安装yarn和react-native-cli,说是yarn是Facebook提供可以替换npm的工具,可以加速node模块下载,真相就是,真的是这样,一开始我没安装yarn,直接npm,这模块下载慢,而且还失败,最后我就用上了,所以大家还是安装yarn吧。
npm install -g yarn react-native-cli
//同样,yarn也应该设置国内镜像源地址
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
完了之后,当然是项目的初始化和运行
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
之后他会尝试启动已经连接的安卓设备。虽然说得这么轻松,但事实上是,要已经配置好Android的开发环境,手机也能成功连接到电脑,之后还要等gradle构建成功,这一切都不容易,但是都属于Android开发的配置,就不说了,默认会的。
注意:
用第一种方式,他是和expo紧密联系在一起的,npm start启动的时候,根据窗口,可以看到有个packager来对项目管理,启动完成后可以看见一切提示操作,包括二维码的显示,这都是用第一种方法所带来的,紧密和expo结合的结果。
在看第二种,虽然也可以运行npm start,或者react-native start,但是就只是启动了数据服务器,而完全没有了第一种方法的效果,显然,这是不依赖expo,而是直接构建对应平台的app来运行的,所以要记得区分,刚开始我就有些晕。
相对而言,第一种方式入手快很多,避免了很多问题,而第二种就颇多问题了,首先是gradle的构建,gradle本来就麻烦,而且一些dependencies,如Facebook的依赖,可能会下载不下来,而需要设置代理,这也是个坑,最好就是将对应的Android项目在Android Studio里构建完毕,然后安装。事情到了这里,第二种方法还没完,因为只是有了客户端,而没有服务器,所以,根据官网的提示,需要开启服务器(react-native start),当然,如果是直接react-native run-android就跑起来,他会帮你开启服务器。至此,还没完,手机客户端访问不到服务器,又根据官网的提示,其中在设备运行中,需要端口对应起来,在android5.0以后,可以如此:
adb reverse tcp:8081 tcp:8081
然后,再次进入手机客户端,确保服务器开启,就应该可以正常访问了,如果还是失败,就请查看官网其他细节了。
补充:
- 根据英文版官网,对于第一种方法也可以使用
npm run android
来在android设备上运行,虽然没具体尝试过,但是经过第二种方法的洗礼,相比也不是什么大问题。
- 对于module的添加,可以直接使用yarn add module_name的方式来添加,或者在package.json手动添加后,使用yarn install
- 在线尝试,在expo的辅助下,他有个可以提供在线编辑代码并尝试的地方,结合expo可以极速见识到ReactNative的魅力,但是由于网络可能一般,用来深度入手不太爽。很多的示例也是通过这个网站来运行的,着实不错。
三、回眸
- 见识过ReactNative后,发现有几个touch到我的点,这代码风格真心简洁而且直白,而且将xml融入代码的思想也是有趣,
- 还有就是他能够即时反馈调整结果,对于界面构建来说真心觉得厉害
- 感觉很容易就上手,起码很容易看懂。
- 最后声明一下,一切的一切都可以按照官网给的提示来操作,有问题查官网,我也是看完官网来做的,这里只是做个mark,毕竟见识完可能有一段时间就不再接触了,哎。
参考:
【3】Expo官网