技術週刊 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、H五、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 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。