React-Native开发环境搭建

写的时候已经是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，毕竟见识完可能有一段时间就不再接触了，哎。

参考：

【1】ReactNative官网

【2】ReactNative中文版官网

【3】Expo官网

【4】Snack Expo-在线