技术周刊 Vol.10 - React Native丨Learn Once, Write Anywhere

结束了前两期的入门（ Vol.8 - React，“5 分钟快速入门”）和进阶（Vol.9 - 进阶吧！React），为期一个月的 React 学习快要完成了。接下来，我们进入学习的最后一阶段 - React Native。

本期周刊重点学习 React Native，从上手到项目实践，希望本期的内容，可以让你对 React 的整体结构，达到一个全局的了解。

React Native 上手

上手一种新的技术，官方的文档 自然是最详实不过了。然而，很多时候看完官方文档，我们仍旧会在自己用的时候掉进各种各样的坑里，所以，我们精选下面这几篇文章，让你在上手 React Native 的同时尽量避免进坑。

ChanceKing - React Native 初构建之我等到花儿都谢了

喜欢 React Native，因为它改变了前端给大家的传统认知，拓展了前端的维度；因为它不仅能在 H5 的范畴里搞一搞，也可以侵占到客户端里翻云覆雨，因为它提高了前端的存在感，让人有所期盼和兴奋。本文作者将自己第一次构建 React Native 项目所踩的坑记录一下，如果你也准备上手 React Native，不妨一起跟着试一下。

听海 JamiE - React Native 基础练习指北（一）、React Native 基础练习指北（二）

React Native 是如何开发 iOS APP？如果你也好奇，那就赶快准备好 Mac OSX, XCode, node 以及 npm，在终端输入 npm install -g react-native-cli 和 react-native init AwesomeProject，从展示一张海报开始，聊聊模拟数据、渲染，通过接口获取线上数据并展示等环节。

陈学家_6174 - React-Native 之布局篇

宽度单位和像素密度、flex 布局、图片布局、绝对定位和相对定位、文本元素……详细的讲解方式，简洁的特征总结，帮你轻松搞定 React-Native 布局。

陈学家_6174 - React-Native 与 React-Web 的融合

对于 React-Native 在实际中的应用，Facebook 官方的说法是 React-Native 是为多平台提供共同的开发方式，而不是说一份代码，多处使用。为此，作者也尝试通过一个实际的例子(以 SampleApp 做一个简单 demo）探究一下共享代码的可行性。

cnsnake11 - React Native 增量升级方案

当修改了代码或者图片的时候，只要 app 使用新的 bundle 文件和 assets 文件夹，就完成了一次在线升级。本文将基于以上思路，尝试讲解增量升级的解决方案。

DesGemini - 初窥基于 react-art 库的 React Native SVG

在移动端，考虑到跨平台的需求，加之 web 端的技术积累，react-art 成为了现成绘制图形的解决方案，且添加了 iOS 和 Android 平台上对 react-art 的支持，在此，作者为诸位带来了（全球首发？=_=）入门文档。

静逸秋水 - React Native 开发小 Tips

相信好多写 React Native 的都是前端出身，当遇见问题时会习惯性从前端出发，但由于 React Native 本身的限制，并不是支持足够多的属性和样式，故作者结合自己的开发实践，将一些未来开发可能会遇见的问题做了总结，并给出一些小的代码参考，希望能帮助到你。

DesGemini - React Native 蛮荒开发生存指南

React Native 的发展可谓是大红大紫，但其文档更新速度却远远跟不上开发的速度，使得 React Native 的工程化恍若蛮荒生存。作者为某一商业项目开发 React Native App 已近半年，并将自己的踩坑和爬坑经验撰写成文，希望此份指南能为大家带来帮助。

React Native for Android

本章节选自侯医生的「React Native Android 安利」系列，教程将会更多的结合原生的安卓去讲 React Native，项目从搭建 React Native Android 环境开始，层层深入，跟着教程学习，可以熟练掌握 react-native-android 的开发。

1. 搭建 React Native Android 环境

搭建 React-Native 的文章虽然很多，但大多数都是搭建 JS 层面的，没有结合原生 Android 及其开发去讲。本文将简单介绍如何使用 Android Studio 与 React Native 搭建一个 React 的基础环境，并使用其成功的制作出了一个 hello world。

2. 创建简单 RN 应用（以 JS 角度来看 RN）

从成功制作出一个 hello world 之后，我们要探索一下如何利用 React-Native 制作出比 Hello World 复杂一点的界面，顺便一起审视一些 React Native Android 工程的目录结构。

4. RN 中使用 JS 调用 Java 代码

掌握 3. 如何控制原生 Android 的 activity 间跳转，我们将其中学到的原生知识，使用 JS 去调用。这样双剑合璧，便可以更加高效的开发 React-Native 应用啦~

6. React Native 中的 React.js 基础

很多关于 React-Native 的知识，都是有关于样式，底层，环境等知识的，现在我们来学习一下 React.js 的基础，我们的代码，我们创建的组件及其他相关知识。

8. 手机百度 feed 流的实现

经过上述几篇文章的学习，你将基本掌握了 React-Native 样式的书写与布局的方式。这一节，我们将一起来做个动手实践的例子，来模仿一下手机百度的新闻流，巩固一下自己的 React-Native 能力。

项目分享

ctriptech - React Native 实践之携程 Moles 框架

本次分享将通过对 Moles 框架的分享，介绍携程在 React Native 方面的实战干货，希望给大家一些灵感和启发。内容包括三个方面：

• Moles 框架在 React Native 和我们主 App 的集成中起到了什么作用？

• Moles 框架是如何打通 Android、iOS、H5、SEO，让我们一套代码跑在多个平台上？

• Moles 框架的组成以及原理是怎样的?

静逸秋水 - 使用 React Native 制作圆形加载条

进度条的常规制作方法，可以用 canvas 去绘制图，也可以用 SVG 去绘制。如何使用 React Native 写这样的进度条呢？可以跟着作者一起来尝试一下这个进度条的完成方案。

DesGemini - Node.js + React Native 毕设：农业物联网监测系统的开发手记

该物联网监测系统整体上可分为三层：数据库层，服务器层和客户端层。数据库层除了原有的 Oracle 11d 数据库以外，还额外增加了一个 Redis 数据库。服务器层采用 Node.js 的 Express 框架作为客户端的 API 后台。客户端层绝大部分是 React Native 代码，另外采用了 Redux 来统一应用的事件分发和 UI 数据管理了。一起来感受下 react native 自带 buff 吧~

王铁手 - React-Native 初体验 - 使用 JavaScript 来写 iOS app

写过一个 Hybrid App 了，自觉不够，又心血来潮，耍起了 React Native，非常简单的入门，不知初体验的你是否和作者想一块儿去了。

（本期完）

---

往期周刊传送门：

• Vol.1 - Vue.js 起手式

• Vol.2 - 666，ES6

• Vol.3 - 前后端分离与前端工程化

• Vol.4 - 这份 Android 有点甜

• Vol.5 - Build, Ship, Run, and Monitor with Docker

• Vol.6 - 面试那些事儿

• Vol.7 - iOS丨好好学习，从娃抓起~

• Vol.8 - React，“5 分钟快速入门”

• Vol.9 - 进阶吧！React

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。

每周二更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。