RN开发（1）__环境搭建与样例

目录

前言 正文 环境搭建 样例实现 问题整理(补充中) 相关资源链接 小结

Tip:使用”Ctrl+F”,在搜索框中输入问题

前言

先要了解几个相关的词汇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文件是否更新,以及进行打包服务。

其他: (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

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

---

二、样例实现

步骤1：react-native命令行初始化RN项目

进入cmd后在任意目录下输入
react-native init Demo --verbose --version 0.55.4

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

步骤2：查看项目目录

项目结构:

一个完整地的RN项目目录

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

编辑package.json文件,可以发现跟maven的pom文件很像，具体的用法以后将会继续写明。

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

步骤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

|
—|—

将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

命令行运行项目:

在当前目录下进入cmd之后输入
react-native run-android

这条指令实际上包含了两个功能，对应到RN端和Android端
RN端:执行了react-native start,开启了服务器端口的监听。
Android端:进行了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
|

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

运行结果:

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

Android端：

---

三、问题整理(补充中)

Problem: “Unable to resolve module AccessibilityInfo from XXX”
按照官网的文档搭建后，最常见的问题就是RN版本问题引发的bug,本文在前面初始化项目的时候已经指定一个比较稳定的版本，不会出现这个问题。
Solution: RN版本降级
①在工程目录下执行 npm install --save [email protected];
②然后安装完成后执行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 [email protected];
Link:
Github上React-Native中关于babel-preset-react-native的issue

四、相关资源链接

参考资料:

React Native中文官网
(中文版本样例较老，直接跑出错没有解决方案)
RN学习资料整理(内容十分丰富，有教程、视频和项目链接)
RN开发问题整理(整理开发遇到的问题，比较齐全，大多都可以再这里找到解决方案)

小结

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

回到文章顶部↑