RN开发（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文件是否更新,以及进行打包服务。

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

小结

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

回到文章顶部↑

RN开发（1）__环境搭建与样例相关推荐

SAP Fiori开发工具——Eclipse环境搭建
SAP Fiori开发工具--Eclipse环境搭建这里我们选择Eclipse Web的Mars版本进行下载. 进入Eclipse官网:Eclipse Downloads | The Eclipse ...
使用Kotlin开发Android应用 - 环境搭建 (1)
一. 在Android Studio上安装Kotlin插件按快捷键Command+, -> 在Preferences界面找到Plugins -> 点击Browse repositorie ...
VS2008开发Windows Mobile6环境搭建及模拟器联网问题图解
安装了VS2008后,新建一个智能设备的工程,但调试时只有三个WM5.0的模拟器可用,从网上查到要安装WM6.0的SDK,还要安装一些其它的组件才能开始WM(现在最新的叫法叫WP Windows Ph ...
php基础开发（集成环境搭建）
php基础开发(集成环境搭建) 1.下载软件 2.安装软件并配置环境 3.验证 1.下载软件下载地址链接:https://pan.baidu.com/s/14rAsOm1g2WUUVaQ7E7VO ...
JAVA团队开发手册 - 1.环境搭建
JAVA团队开发手册 - 1.环境搭建写在前面所有公司最核心的根本就是赚钱 + 实现老板的梦想. 对于IT类技术型公司,最大的成本就是人,可以称之为知识型劳动密集型企业. 对比房地产,模糊的说,产 ...
donet 微服务开发学习-Docker环境搭建 win7 docker 环境配置
donet 微服务开发学习-Docker环境搭建 win7 docker 环境配置目的介绍下载安装安装 Docker Quickstart Terminal 目的介绍 donet 微服务开发 ...
SSM搭建二手市场交易平台（一）：开发流程与环境搭建
关于博主努力与运动兼备-~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步! 微信公众号: 啃饼思录 QQ: 2810706745(i思录) 写在前面嘿,小伙伴们好久不见.最近难 ...
LGT8F328P 开发板arduino环境搭建及中断程序
LGT8F328P 开发板arduino环境搭建: 1. 在官网上下载 Arduino硬件支持包 http://www.lgtic.com/downloads/ Arduino开发平台相关 LGT8F ...
IOS开发学习 IDE环境搭建教程
IOS开发学习 IDE环境搭建教程是本文要介绍的内容,在坛子里逛了一圈,发现一篇好的文章,与友们分享一下,要有耐心的看整个过程,不多说,直接进入话题. 安装条件: 硬件:一台拥有支持虚拟技术的64位双 ...

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

目录

前言

一、环境搭建

参考资料:

安装清单: (Required)

其他: (Optional)

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

步骤2.1：配置npm镜像

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

步骤3：安装react-native-cli

二、样例实现

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

步骤2：查看项目目录

项目结构:

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

准备工作:

命令行运行项目:

真机首次运行问题:

运行结果:

三、问题整理(补充中)

四、相关资源链接

参考资料:

小结

RN开发（1）__环境搭建与样例相关推荐

最新文章

热门文章