RN__环境搭建_react-native-cli(1)

前言

先要了解几个相关的词汇Node.js，React.js和React Native
Node.js: Node.js是JS的运行时环境，类比到Java的jvm,提供了很多系统级的API，如文件操作、网络编程等. 用事件驱动, 异步编程,主要是为后台网络服务设计,使得JS可作为后台开发的语言
React.js: Node.js的一个UI框架，可以对UI代码进行封装，实现UI组件化
React Native: 也是Node.js的一个UI框架，是基于React.js实现的

React Native跟React.js的本质区别在于在渲染时，ReactJs是驱动html dom渲染；React Native是驱动android/ios原生组件渲染。

一、环境搭建

参考资料:

React Native中文官网
(官方文档经历过一次更新，目前中文文档比较详细，推荐阅读)

安装清单:

(Required)
Node.js和npm：npm为Node.js的一个包管理工具，类此于Linux的apt等，Node.js内置了npm无需单独下载。
Python 2.x：应用于命令行的输出打印，React Native不支持3.x
react-native-cli：Node.js的一个插件，可用于命令行执行React Native命令和RN应用启动时检查服务端js文件是否更新,以及进行打包服务。
expo-cli: expo是一组工具，库和服务,可以理解为react-native的超集，其SDK是一个native-and-JS库，可以访问设备的系统功能(如相机，联系人，本地存储和其他硬件)，是目前官方推荐的构建工具。
注：用户可以自主选用安装react-native-cli或者expo-cli来进行环境的搭建，区别在于部分搭建指令的不同，以及调试界面的不同，在高版本(0.56.0以上)，相对于react-native-cli,expo-cli的搭建问题会少很多

(Optional)
Chocolatey：Chocolatey是一个Windows上的包管理器，用于安装windows程序<
Yarn：facebook推出的npm的替代版，下载module的速度比npm快

步骤1：下载Node.js和python 2.x并配置环境变量

可下载最新版本的，记得配置环境变量
变量名:NODE_PATH 变量值:(node.js安装目录)

步骤2.1：配置npm镜像

由于国外的npm服务器下载太慢了，因此配置国内的服务器如下：

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

步骤2.2：下载yarn并配置镜像(可选)

可以使用npm下载yarn,之后的npm命令都可以用yarn来替换npm install yarn
同npm一样，进行一下镜像的配置：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

步骤3：安装react-native-cli或者expo-cli

npm install -g react-native-cli

如果使用了expo的话则是：

npm install -g expo-cli

注: -g 这个参数表示将module下载到全局，默认不加，表示下载到本地，表示当前这个模块只能应用于当前目录项目。

---

二、样例实现

步骤1：用命令行指令初始化RN项目

进入cmd后在任意目录下输入
react-native init Demo --verbose --version 0.55.4
注：如果安装的是expo-cli，后续的介绍里面对应的react-native需要替换成expo
此处应为expo init Demo --verbose --version 0.55.4

可以使用react-native init Projectname初始化一个RN项目,可带附加参数：
--verbose 设置初始化时显示详情，比如安装了什么模块，进度如何等等。
--version Versioncode 设置初始化的RN版本，react-native更新得比较快，若不加此参数，会下载最新的react-native,出现一些兼容性问题，会出现Unable to resolve module AccessibilityInfo from XXX的错误，目前最新的为0.57.5,这里我们使用的是0.55.4

步骤2：查看项目目录

项目结构:

一个完整地的RN项目目录

目录结构.png

android/: Android 工程目录，<font color=red>可用AS等IDE打开</font>，主要用于原生库、原生View的编写桥接、以及 ReactNative 第三方库的 link。
ios/: iOS原生代码目录，主要用于原生库、原生View的编写桥接、以及 ReactNative 第三方库的 link。
index.js/: 设备运行项目的入口文件。有些RN项目下面没有<font color=red>index.js</font>但有index.android.js和index.ios.js
文件，它们的作用都是一样的。React Native会根据运行的平台在index.android.js和index.ios.js中进行选择.
package.json: npm 的包管理文件，功能类似 Android 的 gradle，iOS 的 cocoaPods,编辑该文件,可以发现跟maven的pom文件很像，具体的用法以后将会继续写明。。
node_modules/: 执行 npm install 之后生成，包含 npm 根据 package.json 下载的第三方包的源代码。

react-native init withoutVersion(最新)	react-native init withVersion(指定版本)
最新版本.png	指定版本.png

步骤3：真机调试运行RN项目

准备工作:

①用USB线连接真机与电脑环境
使用adb指令进行查看验证手机是否正确连接
在命令行下输入：adb devices
若显示no devices,进行adb重启adb kill-server之后adb start-server再进行查看。
②配置android工程的Gradle:当我们用进行android端的调试时，会用Gradle进行工程的构建，配置Gradle的加载位置能加快项目的构建位置。
进入到工程目录下,编辑文件./android/gradle/wrapper/gradle-wrapper.properties

修改gradle-wrapper.png

将distributionUrl属性由http请求的更改为本地目录下的gradle目录。

注意：如果成功构建过相同版本的gradle工程则不需要进行这一步的配置，本地C盘目录下已经有对应的库存在，此外最好能够找到对应的版本，防止工程构建失败。
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
distributionUrl=file:///D:/gradle/gradle-2.14.1-all.zip
③打开Android Studio运行目录下的android项目或者在在当前目录下进入cmd之后输入react-native run-android或者react-native run-ios来运行项目
这条指令实际上包含了两个功能，对应到RN端和Android端（ios端）
RN端:执行了react-native start,开启了服务器端口的监听。
Android端(ios端):进行了Android工程的编译，打包，下载类似于AS里面的run

真机首次运行问题

Problem:"The development server returned response error code:404 URL:http://localhost:8081..."
使用真机进行项目调试时一般都会碰到此类问题，该问题来自获取不到服务端的bundle文件，而这里ip和port使用的是localhost：8081，显然当前机子跟服务端不在同一ip下，模拟器一般不会出现这个问题。

连接不上服务器
Solution: 打开JS开发者模式进行ip和port配置
①进入应用后，使劲左右摇晃手机,选择Dev settings=>Debugging
开发者选项.png
ip和端口.png

②输入主机的ip和port，port默认为8081

输入端口.jpg

运行结果:

服务端:

可以看到被拉取文件的进度，调试的错误有时也会在这里显示出来

进度.png

Android端：

进入App界面后显示"Welcome to React Native!"(RN上的"hello world" = 。=)

成功界面.jpg

---

三、问题整理(补充中)

Problem:"Unable to resolve module AccessibilityInfo from XXX"
按照官网的文档搭建后，最常见的问题就是RN版本问题引发的bug,本文在前面初始化项目的时候已经指定一个比较稳定的版本，不会出现这个问题。

Solution: RN版本降级
①在工程目录下执行 npm install --save react-native@0.55.4
②然后安装完成后执行 react-native upgrade 提示是否覆盖原来的部分文件, 一直输入y最后提示入Successfully upgraded this project to react-native v0.55.4
Link:Github上React-Native中关于AccessibilityInfo的issue

Problem: "Module build failed: Error: Plugin 0 specified in "base" … provided an invalid property of "default" 也是一个库之间相互依赖的兼容问题，需要对库进行更新
Solution: 模块更新
①在工程目录下执行 npm install --save-dev babel-preset-react-native@2.1.0
Link: Github上React-Native中关于babel-preset-react-native的issue

四、相关资源链接

参考资料:

React Native中文官网(之前中文版本样例较老，直接跑出错没有解决方案,在0.57.0出来之后文档更新一次).
开源库检索JS.coach(React Native的开源库检索网站)
RN学习资料整理(内容十分丰富，有教程、视频和项目链接)
RN开发问题整理(整理开发遇到的问题，比较齐全，大多都可以再这里找到解决方案)

小结

RN的搭建过程踩坑比较多=。=后续会介绍RN与Android工程的结合