React Native：用JavaScript開發移動套用

《React Native：用JavaScript開發移動套用》是2015年10月電子工業出版社出版的圖書，作者是【美】Truong Hoang Dung（張皇容）。

基本介紹

• 中文名：React Native：用JavaScript開發移動套用
• 作者：【美】Truong Hoang Dung（張皇容）
• 譯者：奇舞團
• 出版時間：2015年10月
• 出版社：電子工業出版社
• 頁數：256 頁
• ISBN：9787121271700
• 定價：65 元
• 開本：16 開

內容簡介

React Native是當前移動端開發中的優秀解決方案。《React Native：用JavaScript開發移動套用》圍繞著如何將一個完整App提交到App Store，講解了使用React Native開發iOS套用所涉及的方方面面。首先介紹了Flexbox布局，教大家從零開始搭建一個初始套用，以此闡明React Native的基礎運行機理；然後介紹了Flux的設計思想，怎么理解和使用Promise、Fetch等新API，以及資料庫SQLite存儲方面的知識，以便讓你對一個完整的App形成感性認識；最後講解了怎樣測試React Native組件，並將完整的App發布到App Store中。

如果你對開發Web端的原生移動套用感興趣，《React Native：用JavaScript開發移動套用》就是一本不容錯過的以實例代碼為引導的入門書籍。

作者簡介

奇舞團（奇虎75Team）是奇虎360公司Web平台部前端工程師 + 部分特約嘉賓 組成的一個前端團隊，由一群活躍而有影響力的工程師組成。

目錄

第1 章簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

本書中你將學到的內容: 1

如何閱讀本書1

各章節的組織結構2

第2 章安裝配置新項目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

在已有的iOS 套用中集成React Native 5

首先建立一個簡單的iOS 套用5

安裝React Native 5

創建React Native 套用6

將React Naitve 集成到iOS 套用中去7

在設備上編譯和運行13

在設備上運行13

練習： 15

第3 章Flexbox 布局介紹. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Web 開發中的Flexbox 18

Flexbox 布局究竟是什麼呢？ 19

教程20

1. 柵格系統20

2. 聖杯布局24

3. 帶有可變寬度搜尋框的流式導航條27

4. 垂直居中32

在React Native 中使用Flexbox 35

第4 章開發第一個套用. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

在React Native 中完成“Hello World” 38

創建項目38

使用Xcode 39

使用模擬器39

項目結構41

React 基礎43

render 函式43

樣式45

註冊組件46

修改組件46

搜尋框和數據檢索50

增加搜尋框50

方法代理51

檢索數據52

顯示結果55

組件狀態55

創建我們的ListView 組件56

創建每個數據單元57

給列表中每個結果項設定樣式59

結果60

第5 章在React Native 中使用導航. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

第6 章動畫和滑動選單. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

我們需要做什麼71

相關的代碼71

它是如何運行的75

如何使用76

擴展一些缺少的功能78

ii 目錄

第7 章用React Native 繪製Canvas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

使用WebView 79

如何使用80

使用ReactART library 82

在網頁中使用ReactART 82

在React Native 中使用ReactART 85

結論90

使用React Native 播放音頻90

第8 章你的第一個自定義視圖. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

嘗試一下98

第9 章Flux 介紹. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Flux 是什麼？ 104

從React 到Flux 105

Flux 110

練習119

第10 章處理複雜的應用程式狀態. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

解決方案121

初識Baobab 121

把我們的狀態樹併入ReactJS 123

連線單個游標到組件124

連線多個游標到組件124

如何改變Baobab 樹的狀態125

應用程式狀態127

一個稍微複雜的例子129

Optimize 130

1.ReactJS 的級聯渲染131

2. 重複渲染131

第11 章使用Node 來實現服務端API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

安裝Express： 135

目錄iii

Request 和Response 對象136

理解中間件139

從URL 中獲取參數142

處理相關參數143

路由實例143

重構路由144

使用JSON 146

JSON 結構146

在JavaScript 中使用JSON 149

iOS 中的HTTP 149

Web 服務151

NSURL, NSURLRequest, NSURLSession 和NSURLSessionTask 152

構造URL 和傳送請求153

使用NSURLSession 153

JSON 數據155

解析JSON 數據156

主執行緒156

更深入的學習：請求主體157

第12 章在React Native 中使用檔案上傳. . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

創建伺服器159

註解161

進行檔案驗證161

總結： 162

React Native 檔案上傳的客戶端： 162

第13 章理解JavaScript Promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

事件並不是萬能的172

Promise 術語173

JavaScript 中的Promise 174

瀏覽器支持和Polyfill 175

與其他庫的兼容性175

讓複雜的異步代碼變得更加簡單176

iv 目錄

將Promise 用於XMLHttpRequest 177

鏈式調用178

數值處理178

異步操作佇列179

錯誤處理180

圖片181

JavaScript 異常和Promise 182

錯誤處理實戰182

並行和串列—— 魚和熊掌兼得184

創建序列185

Promise 和Generator 190

Promise API 參考193

靜態方法193

構造器194

實例方法194

第14 章Fetch 簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

XMLHttpRequest 快要過時了195

fetch 基礎使用195

使用XMLHttpRequest 實現195

使用fetch 實現196

回響中的元數據197

回響類型197

Promsie 方法鏈198

使用fetch 請求傳送憑證信息199

問答環節200

我該如何取消一個fetch 請求？ 200

有相關的polyfill 么？ 200

為什麼在service workers 中支持“no-cors”，而在window 中卻不行？ 200

第15 章在iOS 中使用SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

創建並打開資料庫202

綁定變數203

目錄v

開發SQLite 模組204

第16 章集成Google Admob . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

創建項目209

將SDK 添加到你的Xcode 項目209

第17 章React Native 組件國際化. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

我要做什麼214

工作機制214

安裝步驟214

在項目中使用218

第18 章測試React Native 組件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

安裝配置測試環境221

編寫測試程式226

第19 章附錄：React.js 快速介紹. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

JSX - React 的特殊語法228

開始和運行229

組件- 構建React 的基石229

在我的javascript 代碼中，出現了HTML 片段？ 230

組件和狀態231

第20 章附錄B：Objective-C Primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

類的基本語法233

方法233

屬性234

實現235

規範237

第21 章webpack 入門. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

為什麼要使用webpack? 238

webpack 也適合Browserify 用戶238

vi 目錄

啟動webpack 239

loader 的使用239

樣式表和圖片240

功能開關241

多個入口點（entrypoint） 242

最佳化共用代碼243

異步載入243