从 Android 到 React Native 开发（1、入门）

 你们好┏ (^ω^)=，许久不见，一不当心断更就成为了一种习惯，由于最近掉React Native的坑里，没法自拔啊～(╯‵□′)╯︵┻━┻。
 关于React Native是什么，各位可谷歌之，这里主要给你们安利下React Native，总结下一些从Android到React Native相关的概念和基础。来吧，互相伤害啊(˶‾᷄ ⁻̫ ‾᷅˵)。

本文并不是讲解入门基础，更可能是给Android原生开发学习和理解React Native，前半部分主要是闲谈和安利，后半部分是相关的入门，请紧张的往下看Σ（・□・；）

注：喜欢干货的能够直接跳到后面的：带着Android开发来理解React Native

请收起你不屑的眼神

为何要学React Native？

• 由于如今许多主流的应用都有React Native的影子，它对比原生开发更为灵活，对比H5体验更为高效，并且跨平台的支持特性。
• 相对ionic这类PhoneGap，它效率更高，和原生之间的交互更方便。
• 多个版本迭代后的今天，它已经拥有了丰富第三方插件支持。
• React Native解决不了的，能够经过各位熟悉的原生来解决。
• 更方便的热更新。

固然，React Native的坑也不在少数：

• 尽管是跨平台，可是不一样平台Api的特性与显示并不必定一致。
• 相对增大了app的体积。
• 调试’相对‘麻烦。
• Android上的兼容性问题。

 总的来讲，React Native适合做为项目中的补充，而不是做为核心去开发APP。

 由于尽管是跨平台和快捷开发，可是以React Native为核心，去开发稍微偏中型以上的项目，后期维护的人员绝对不比原生的少多少，并且项目大了，体验依旧是个大问题。

 相反，把React Native做为项目开发中的补充，能够在必定程度上实现平台业务的统一，还有灵活的开发效率，补充原生的不足。

此时此刻，此情此景

如何入门？

 做为原生开发，由于React Native的特殊性，在入门的时候会比前端开发更慢一些，除非你会基础的javascript，ES6语法，React相关基础知识，否则这一层面确实相对会缺少优点。

 原生开发在React Native的优点是后期，React Native随着业务的增长，单纯的React Native时时没法知足需求，那时候熟悉原生、又掌握了React Native的你，必定能给出更好的解决方案。

 因此不要放弃（我会告诉你中途我都放弃好几回了嘛？），万事开头难，况且你已经被Android坑了这么久，怕(￣◇￣;)什么？刚开始想到要学习js和es6，确实会有些怠惰，但这步踩下去，你将会打开新世界的大门，哲学大门就在前方(˶‾᷄ ⁻̫ ‾᷅˵)。

目瞪口呆

那么入门前你须要知道：

• javascript基础（不懂？不怕，学习React的时候一块儿熟悉）
• ES6语法（不懂？不怕，学习React的时候一块儿熟悉）
• React 仍是必须学习一下，能够没必要太深刻，可是至少了解下思路也好。

 React 的核心思想是：封装组件。React Native就是按照一个个组件组成App，能够认为，基础的React Native，就是一个Activity，里面放着许多的组件，跳转不一样的组件，实现不一样的页面。

React的学习能够经过这个了解: 点我去看视频。
React相关的资料 ：点我资料。

 上面的资料足够你了解React，了解了React，你才能更好的学习React Native，若是对于javascript和ES6还不了解的，经过上述React学习能够同步了解。
 打了那么多鸡血，那么赶忙，让咱们先走下面，用Android的基础，来了解React Native的‘哲学‘吧。

带着Android开发来理解React Native

一、开发环境

 Android开发转过来的，推荐Webstrom，由于它和Android Studio同出一家，快捷键、插件、git版本管理等等基本不须要二次学习，无需多虑了。至于开发环境配置，跟着下方连接妥妥的。

Webstrom 简单配置

React Native 开发环境配置

二、项目理解

 React Native建立工程，是经过在命令终端输入 react-native init 你的项目名字 来建立工程的，建立的工程会从网络端，同步到你终端所在路径的本地，生成一个和android project相似的项目，以下图。

 
其中关键的文件有：

• android文件夹，就是一个能够用android studio打开的android项目。
• ios文件夹，是一个能够用xcode打开的ios项目。
• index.android.js，这是android的React Native入口文件。
• index.ios.js，这是ios的React Native入口文件。
• package.json，相似android studio的build.gradle，你依赖的库都写在里面。
• node_module文件夹，你依赖的库下载下来都存放在里面，属于git的忽略文件，你要找的依赖库源码也在里面，包括React和React Native。
• jscode文件夹，是本身建立的文件夹，用来存放本身写的js文件。

这里须要理解的是：

 package.json，相似于android studio中的build.gradle添加远程依赖，不一样的是，package.json大多数时候不须要咱们手动添加，咱们只须要在根目录经过命令行，npm install xxxxxx --save 就能够依赖一个库了。

 install以后，库的依赖信息，自动被写到package.json里面，对应的库也会被下载到node_module文件夹中，相似android studio依赖后把aar同步到本地。

package.json

 node_module是一个忽略文件，提交的时候不须要提交到git上，相似android studio远程依赖下来的aar，也不会提交到git上。其余人在使用React Native项目时，只须要npm install，工程就会根据package.json，去同步下载各个依赖库到node_module。

注：有时候还须要运行react-native link 或 react-native link xxx，这是由于有些第三方库是经过原生代码加React Native实现的，经过这个命令，能够自动把相关的配置代码，自动添加到android和ios工程中。

三、Android开发须要理解的React Native

1）React Native 实际上是运行在ReactActivity上

 通常状况下只在一个activity上运行，通常状况下是由于，你也能够本身写新的Activity，继承ReactActivity来实现你想要的逻辑。

项目默认建立好了MainActivity

2）Application默认建立工程时，就会继承ReactApplication

 其中getPackage()就是返回须要与原生交互的包，MainReactPackage时初始化生成，其余是你react-native link命令时帮你插入的。固然，你也能够本身写与原生交互的模块。

3）路由（页面跳转）

 React Native默认是运行在一个Activity上，那么页面之间的跳转天然不是Activity之间的跳转，而是经过 Navigator来实现跳转的。

 是的，Navigator是用来作跳转的，经过场景（Scene）来指定跳转对象。这里Scene相似Intent的做用，告诉Navigator我要去哪里，Navigator负责场景推入和退出。（推荐使用react-native-router-flux框架实现）。

4）state，状态

 更新界面，修改显示，加载数据，用户交互，都是靠它，它是整个React Native的核心之一，React Native组件的state变化了，那么它就会从新渲染，因此维护state，经过数据或者动做更新state等，是React Native的重点，也是和原生很大差别的地方。

 因此你就看到redux这个东西，也许第一次接触你会以为它很难理解，可是你只须要知道，它的核心就是让你更好的维护React的state，统一管理和处理state，因此后期redux-thunk会成为你React Native的管理利器。固然，若是组件或项目不复杂，彻底没必要要接触它。

 “组件的state改变了，因此界面变化了。”

5）编译调试

 编译其实很简单，android其实就是在项目的根目录终端输入react-native run-android就能够编译安装，IOS本人习惯是，经过点击ios文件目录下的xcodeproj文件，打开xcode直接点击运行。

对，就是我

 当前，刚刚接触React Native，运行不起来是时有的事情，百度谷歌一个一个解决就行了，大部分时候都是忘记npm install，react-native link，ip不对，node服务没有从新启动等等，相信我，React Native会让今后讨厌上红色！

 React Native的调试是靠chrome浏览器来调试的，没错，浏览器，这样很前端吧～哈哈哈(◐‿◑)。经过摇晃手机（模拟器使用快捷键 android Command⌘ + M / ios Command⌘ + D）在React Native 应用弹出下方页面。Debug JS Remotely就是打开调试。

图片来源网络，侵删

 在浏览器能够看到以下页面，有源码，能够断点，看输出，调试参数，应有尽有。

图片来源网络，侵删

调试相关的文章推荐 : React Native调试技巧与心得。

最后

 其实还有不少能够聊的，秉承着不能让我一个瞎的精神，安利他人入教，我但是孜孜不倦啊。惋惜由于时间关系（懒），想一想这篇文章拖了快一个月，现在还在电脑里躺尸，其余的仍是等第二期吧。等有人看了再说吧。╮(╯▽╰)╭好了，赶忙补基础吧：reactnative.cn React Native 中文官网。

本人github 主页

点我，我是React Native 练习项目。

仍是熟悉的那只猫