React Native集成与简单使用（一）

前言

最近一段时间在看React Native，网上资料确实不少，一段时间的简单学习，终于把环境搭建好了，以及运行了第一个例子。本文主要记录环境搭建，以及自己在搭建React Native环境时踩过的坑。

先来简单谈下React Native

它是Facebook在React.js Conf 2015大会上推出的基于JavaScript的开源框架，结合了Web应用和Native应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建一流的应用程序体验, 仅次于原生体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。

React Native强调组件化开发，使得代码在更大程度上得到复用，而且组件之间组装很灵活。它希望将功能分解化，让开发变得像搭积木一样，快速而且可维护。



React主要有3个特点：

*作为UI(Just the UI)

*虚拟DOM(Virtual DOM)

*数据流（Data Flow）单向数据流

详细可以来看这React Native 中文版

或者贾鹏辉的技术博客

环境搭建

因为本人是搞Android的，所以本文只记录Android环境搭建相关

1 . 安装jdk

2 . 安装sdk

3 . node.js和Git安装

我的node版本



Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

因为每次在初始化项目时会访问外网，导致一般等待时间较长，所以建议设置npm镜像以加速后面的下载过程，或者自己翻墙，设置镜像地址有两种方法。

其一：

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

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

其二：

在nodejs\node_modules\npm该目录下有npmrc文件，只要我们在文件中加上registry = https://registry.npm.taobao.org这句话就可以了。





4.安装React Native命令行工具

我们需要在github上下载命令行工具，在控制端输入npm install -g react-native-cli，等待安装完成。

至此环境搭建就算好了。

项目创建及运行

我们在cmd终端用命令切换到指定目录，输入react-native init AppDemo，创建一个AppDemo项目，等待初始化完成，初始化完成界面如下：



通过上图我们可以知道当要在ios中运行时，可以执行react-native run-ios，在android中运行时，可以执行react-native run-android。

初始化完成之后的项目目录如下：



其中index.android.js是ios的入口文件，而index.ios.js是android的入口文件。

运行项目，开始踩坑

当项目初始化完成之后，我们就可以运行项目了，我是用真机测试的，下面来记录我在此期间踩过的坑。

在命令行中将目录切换的AppDemo中，执行react-native run-android命令，它会开启npm包管理器packager，界面如下：



我们可以看到运行界面如下：



报错了~~~，运行几遍之后依然如此，于是只好google了，经过一番搜索，原来是有些android系统进行了自己的系统定制,然后总结了两种解决方案：

1.直接用Android Studio打开项目，然后运行项目，就可以正常安装了。
2.其实我们在运行命令时已经生成了apk文件，我们只要在AppDemo\android\app\build\outputs\apk目录中找到apk文件，然后发送到手机就可以运行项目了。

运行结果如下：



点击RELOAD，运行结果如下：



在网上搜索之后，原来是没有连接到js服务器，然来要重设置ip地址，格式如下：ip地址+8081端口

摇晃自己手机会出现如下界面：



点击Dev Settings出现如下界面：



点击Debug server host&port for device



注意设置ip地址应该和电脑ip一样，退出应用之后，再重新加载应用如下：



其中还可能出现界面白屏现象，我们按back键也没反应，这是我们没有开启悬浮球权限，具体可以详细看这里：react-native在Anroid真机运行时可能会遇到白屏的情况解决办法

终于运行成功了。

项目调试

修改index.android.js入口文件，摇晃手机，重新RELOAD项目，成功之后如下：



其中打开调试界面在模拟器上有快捷键，具体可以自行百度，有可能有人会担心，当我们发布自己的应用时，当用户由于不经意间动作，打开了调试界面，那不多尴尬!!!! 这点就可以放心了，当我们发布自己的应用时，调试界面就会被关闭，它是无论如何不会被打开的。

我们可以看见调试界面有很多选项，我们分析下各自常用选项的作用：

Reload 是重新加载项目

Debug JS Remotely 打开远程JS调试功能，我们会看见在浏览器中打开如下界面：



Enable Live Reload 开启动态加载 就是当我们代码发生改变之后，界面会自动重新加载，加载全部js文件。

Enable Hot Reloading 开启热加载 就是我们加载之后不需要重启项目，直接显示修改代码的页面，它是增量更新。

Dev Settings 设备设置

常用IDE开发工具

1 .Web前端： WebStorm Sublime都是收费的。WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为”Web前端开发神器”、”最强大的HTML5编辑器”、”最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

ReactNative 代码智能提醒（webstorm）

git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate[/code] 
下载模板：https://github.com/wix/react-templates安装命令

npm install react-templates -g


点击下载WebStorm

点击下载WebStorm破解版

2 .FaceBook官方推荐的nuclide，只支持Mac，基于Atom（github）（Atom最大的特色就是可以安装很多的插件来完成我们的需求）

3 .Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，它是微软老大哥开发的。适合自己使用的编辑器了 插件：https://marketplace.visualstudio.com/VSCode

学习React需要掌握的知识
1.jsx语法

2.ES6相关知识，具体可以看这ECMAScript6入门

3.前端基础  CSS+DIV+JS