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

大家好┏ (^ω)=，许久不见，一不小心断更就成为了一种习惯，因为最近掉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

1、开发环境

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

Webstrom 简单配置

React Native 开发环境配置

2、项目理解

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工程中。

3、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调试技巧与心得。

最后

其实还有很多可以聊的，秉承着不能让我一个瞎的精神，安利他人入教，我可是孜孜不倦啊。可惜因为时间关系（懒），想想这篇文章拖了快一个月，如今还在电脑里躺尸，其他的还是等第二期吧。等有人看了再说吧。╮(╯╰)╭好了，赶紧补基础吧：http://reactnative.cn React Native 中文官网。

2、从Android到React Native开发（二、通信与模块实现）

3、从Android到React Native开发（三、自定义原生控件支持）

4、从Android到React Native开发（四、打包流程和发布为Maven库）

一、本人github 主页

二、RN完整学习项目

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

还是熟悉的那只猫