前言

作为移动开发爱好者，大部分时间我都在学习移动的原生 开发。对于最近(火了一年多，也不算最近)的兴起的混合开发稍作了解。

开发环境搭建

具体搭建过程详见[React Native 中文网]

搭建过程中遇到的坑:

1.关于安装react-native-cli过程的问题

如果遇上翻墙问题，可以设置淘宝代理下载，网速非常稳定。

2.真机测试白屏

需要在权限中设置 该app的悬浮窗权限。

3.无法链接测试

需要在局域网内，开启

react-native run-android

然后先在浏览器里输入 局域网:8081 是否显示 已开启服务

最后摇一摇手机进入设置界面，设置该局域网和端口号

4.重载代码

修改代码后，摇一摇手机即可进入选择。选择reload 即可加载修改的代码。

5.用AS运行该项目

将Android和js文件夹拷贝到新建的项目中，修改项目中app下的build.gradle的配置，统一为React-Native环境配置。将Application里的路径修改为自己的路径。
使用Android studio中Terminal运行：react-native run-android。

React Native 混合开发的思想

参考文章
RN最大的优势和吸引人的地方就是跨平台，也就是所谓的 learn once, run everywhere(这句话哪里听过了)。

整体架构如下:

04602301662556708a669ff6685f8978ce668b3d.jpg

对于 Android 开发者来说， RN是一个普通的安卓程序加上一堆事件响应， 事件来源主要是JS的命令。主要有二个线程，UI main thread, JS thread。 UI thread创建一个APP的事件循环后，就挂在looper等待事件 , 事件驱动各自的对象执行命令。 JS thread 运行的脚本相当于底层数据采集器， 不断上传数据，转化成UI 事件， 通过bridge转发到UI thread, 从而改变真实的View。 后面再深一层发现， UI main thread 跟 JS thread更像是CS 模型，JS thread更像服务端， UI main thread是客户端， UI main thread 不断询问JS thread并且请求数据，如果数据有变，则更新UI界面。

ReactNavite的开发流程

1. 编写index.android.js即可开发android应用。同理index.ios.js就是开发ios的。两者代码有所不同但大部分代码可以复用。

2. 一个简单的hello world

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}
// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

启动app
摇一摇，reload 即可看见helloworld。

结束语

ReactNative 对于原生app开发者来说是一种全新的开发体验。无论是代码编写还是UI布局方式，这需要专门学习一种新的语言形式。
跨平台看起来是一个很好的东西，但其实是一个大坑。对于前端来说，RN好像确实能够做到无敌。但至于他们吹的杀死原生应用，还需要冷静的考虑一下。

---

我顺便搜索一下关于RN以及混合开发的职位，并不多。而且都是那种初创型的企业，为了节约成本。我居然看见一个招聘要求里需要一个人负责ios+网站+android+微信开发。
RN虽好，且行且珍惜。

---

---

接下来准备顺手撸一个RN的程序，作为和原生的比较体验。