前言

本書介紹 Facebook的行動應用程式 JavaScript開發架構：React Native。你可以利用現有的 JavaScript與 React知識建構與部署真正原生的 iOS與 Android全功能行動應用程式。使用 JavaScript並不表示功能就會比較弱。使用 React Native相較傳統行動開發方式有許多優點且不必犧牲原生的外觀與操作感。

我們會從基本開始漸進到部署至 iOS App Store與 Google Play Store的全功能應用程式，且兩平台間的程式 100％可共用。除了基本建構之外，我們還會討論如何運用第三方函式庫與如何撰寫自定 Java或 Objectvie-C等函式庫來擴充 React Native等主題。

如果你是從前端軟體或網頁開發轉向行動開發，這本書就是為你所寫。React Native相當驚人，我希望你跟我一樣對探索它感到興奮！

前提

本書並非 React入門。我們假設你已經有一些 React的運用知識。如果你沒有碰過 React，我建議在回頭深入行動開發之前先閱讀課程教材或網頁，特別是你應該熟悉 prop與 state的角色、元件生命週期，以及如何建構 React元件。

我們還會使用一些 ES6語法與 JSX，如果你不熟悉它們也不用擔心，我們會在第二章討論 JSX，並在附錄 A討論 ES6語法。這些功能基本上是你已經熟悉的 JavaScript程式的1：1轉譯。

第一章

React Native是什麼？

React Native 是撰寫真正原生 iOS 與 Android 行動應用程式的 JavaScript 架構，它基於 React 與 Facebook 的 JavaScript 函式庫，用以建構使用者界面，但相較於以瀏覽器為目標，它的目標是行動平台。換句話說：網頁開發者現在可以用我們已經熟知的

JavaScript函式庫撰寫觀感上真正“原生”的行動應用程式。還有，因為大部分你所撰寫的程式可以跨平台共用，React Native讓同時開發 Android與 iOS變得簡單。

類似網頁用的 React，React Native應用程式以 JavaScript與稱為 JSX的 XML標籤混合撰寫。然後 React Native在底層以 Objective-C（iOS）或 Java（Android）“橋接”原生API的呼叫。因此，你的應用程式會使用真正的行動 UI元件而非網頁元件，其外觀與

操作感會與其他行動應用程式相似。React Native還有顯露出 JavaScript的平台 API界面，因此你的 React Native程式可存取相機或位置等平台功能。

React Native現在支援 iOS與 Android且有潛力擴展至未來的平台。本書內容涵蓋 iOS與 Android。我們所寫的大部分程式可跨平台。是的，你真的可以使用 React Native建構產品等級的行動應用程式！傳說 Facebook（http://bit.ly/1YipO7A）、Palantir（http://bit.

ly/1PPEiZH）與 TaskRabbit（http://bit.ly/1PPEjNg）已經使用它開發提供給使用者的產品。

React Native的優點React Native確實產生使用平台標準的 API，讓它領先 Cordova或 Ionic等大部分現有的跨平台應用程式開發方式。現有的行動應用程式撰寫方式以 JavaScript、HTML與 CSS等典型的網頁元素組合。雖然這種方式可行，但它們通常沒有存取平台原生的 UI元素。當這些架構嘗試模擬原生元素，其結果通常有點“感覺”不對；對動畫等細節的反

向工程需要大量的投入，且會很快的過時。

2 | 第一章

相對的，React Native確實將你的標籤轉譯成真正的原生 UI元素，利用現有的方式產生各種你所使用的平台畫面。此外，React的工作與主 UI元素的執行緒分離，因此你的應用程式可以維持高效能而無須犧牲能力。React Native的更新循環與 React相同：當props或 state改變時，React Native會重新整理畫面。React Native與瀏覽器中的 React的主要差別在於 React Native利用平台的 UI函式庫，而不是 HTML與 CSS標籤。

對習慣網頁 React的開發者來說，這代表你可以使用熟悉的工具撰寫兼具效能與原生外觀的應用程式。React Native也代表對普通行動開發中兩個面向的改善：開發者的體驗與跨平台開發的潛力。

開發者體驗

如果你之前曾經開發過行動應用，或許會驚訝於 React Native 有多容易使用。React Native團隊在架構中製作出很強的開發工具與有意義的錯誤訊息，因此使用工具是開發體驗中很自然的部分。

舉例來說，由於 React Native“只是”JavaScript，你無須重建應用程式以檢視修改後的反應；相對的，你可以按下 Command+R來重新整理應用程式，如同使用網頁。所有花在重建應用程式的時間累計起來也很可觀，相較之下 React Native的快速循環真是 恩物。

此外，React Native 可讓你利用智慧除錯工具與錯誤報表。如果你熟悉 Chrome 或Safaris的開發者工具（圖 1-1），則會很高興知道你也可以將它們用於行動開發。同樣的，你可以使用各種你所偏好的 JavaScript文字編輯器：React Native並不強迫你使用Xcode或 Android Studio進行 iOS或 Android的開發。

除了對日常開發體驗的改善，React Native還可能對產品發佈循環有正面的影響。舉例來說，Apple允許透過無線載入 JavaScript基礎的應用程式行為修改，而不必經過額外的審查步驟。

這些小優點累積起來可以節省開發者們的時間與精力，讓你專注於工作中更有趣的部分

並更有生產力。

React Native是什麼？ | 3

圖 1-1　使用 Chrome Debugger

程式重複使用與知識分享

使用 React Native可大幅縮減建構行動應用程式所需的資源。任何知道如何撰寫 React程式的開發者可用相同的技術開發網頁、iOS與 Android。透過消除“固定”目標平台的開發者，React Native讓你的團隊程序更快速並更有效率的分享知識與資源。

除了知識可以分享外，大部分的程式也可以分享。不是所有程式都可以跨平台，且

根據特定平台上所需的功能，你有時需要動用 Objective-C或 Java（這還不錯，我們會在第七章討論所謂的原生模組如何運作）。但跨平台重複使用程式對 React Native是非常的容易。舉例來說，根據 React Europe 2015 的一份演說稿（https://youtu.be/

PAA9O4E1IM4），Android版與 iOS版的 Facebook Ads Manager共用 87％的程式。本書最終的快閃卡片應用程式範例在 Android與 iOS間完全共用程式碼。這是很難被贏過的一點！

4 | 第一章

風險與缺點

如同任何事情，使用 React Native不是沒有缺點，且 React Native是否適合你的團隊要看個別的情況。

最大的風險或許是 React Native的成熟度，它還很年輕。iOS支援在 2015三月發佈，而 Android 支援在 2015 九月發佈。文件還有改善空間，但持續開發中。有些 iOS 與Android功能還沒有支援，社群還在找尋最佳實踐。好消息是在大部分情況下，你可以自行實作遺落的 API，第七章會討論這一部分。

由於 React Native在你的專案中引入另一層，它也會讓除錯更麻煩，特別是在 React與平台交錯的部分。我們會在第八章更深入的討論 React Native除錯並嘗試解決一些最常見的問題。

React Native還很年輕，一般對使用新技術的警告於此處也適用。整體來說，我認為你會看到優點大於缺點。

總結

React Native是能讓網頁開發者使用現有的 JavaScript知識建構行動應用程式的架構。它提供更快的行動開發與更有效率的跨 iOS、Android與網頁程式共用而不必犧牲終端使用者體驗或應用程式品質。其缺點是還在發展中。如果你的團隊可以處理使用新科技

帶來的不確定性並想要開發多平台的行動應用程式，你應該檢視 React Native。

下一章會討論一些 React Native與 React網頁不同之處與一些重要概念。如果你想進入開發主題可直接跳到第三章，它討論開發環境的設定與撰寫我們的第一個 React Native應用程式。

第二章

使用 React Native

這一章將討論“橋接”並檢視 React Native如何運作、檢視 React Native組件與網頁部分的不同，以及你必須知道以便能建構與設定行動元件的內容。

如果你想直接進入開發主題並看到 React Native的實際作用，可跳到第

三章 !

React Native如何運作？以 JavaScript 撰寫行動應用程式的念頭感覺上有點怪。怎麼可能在行動環境中使用React？為了理解 React Native底層的技術細節，首先我們需要回想 React的功能之一：Virtual DOM。

在 React中，Virtual DOM作為開發者對外觀的描述與實際將應用程式展現於網頁上的工作之間的介層。為在瀏覽器上展現互動性使用者介面，開發者必須編輯瀏覽器的

DOM，或稱 Document Object Model。這是成本很高的一個步驟，大量的 DOM寫入對效能有重大的影響。相較於直接在網頁上展現變化，React使用記憶體版本的一個 DOM計算出必要的改變，並只展示出必要的部分。圖 2-1顯示它的運作方式。

第二章

使用 React Native

這一章將討論“橋接”並檢視 React Native如何運作、檢視 React Native組件與網頁部分的不同，以及你必須知道以便能建構與設定行動元件的內容。

如果你想直接進入開發主題並看到 React Native的實際作用，可跳到第

三章 !

React Native如何運作？以 JavaScript 撰寫行動應用程式的念頭感覺上有點怪。怎麼可能在行動環境中使用React？為了理解 React Native底層的技術細節，首先我們需要回想 React的功能之一：Virtual DOM。

在 React中，Virtual DOM作為開發者對外觀的描述與實際將應用程式展現於網頁上的工作之間的介層。為在瀏覽器上展現互動性使用者介面，開發者必須編輯瀏覽器的

DOM，或稱 Document Object Model。這是成本很高的一個步驟，大量的 DOM寫入對效能有重大的影響。相較於直接在網頁上展現變化，React使用記憶體版本的一個 DOM計算出必要的改變，並只展示出必要的部分。圖 2-1顯示它的運作方式。

6 | 第二章

狀態改變 計算差異 重新顯示

圖 2-1　在 Virtual DOM執行計算以限制瀏覽器 DOM的顯示

對網頁 React來說，大部分開發者認為 Virtual DOM主要是為了效能最佳化。Virtual DOM當然有效能上的好處，但其真正的潛力在於抽象的能力。在開發者與實際顯示之間加上乾淨的抽象層開啟了很多有趣的可能性。如果 React能夠顯示到瀏覽器的 DOM以外之目標上會怎樣？畢竟 React已經“懂得”你的應用程式應有的外觀。

確實，這是 React Native 的運作方式，如圖 2-2 所示。相較於顯示在瀏覽器的 DOM中，React Native呼叫 Objective-C或 Java的 API來顯示 iOS或 Android的元件。這是React Native與其它跨平台應用程式開發選項通常使用以網頁為基礎的顯示的不同處。

圖 2-2　React可顯示到不同的目標上

使用 React Native | 7

這都是因為“橋接”，它提供平台原生 UI元素的界面給 React。React元件從描述外觀的render函式回傳標籤。對網頁 React來說，這直接轉譯到瀏覽器的 DOM上。對 React Native，標籤會轉譯成符合平台的格式，因此 <View>會變成 iOS上的 UIView。

React Native 目前支援 iOS 與 Android。由於抽象層是由 Virtual DOM 提供，React Native也可將其它平台當做目標—只要有人寫出橋。

顯示的生命週期

如果你曾經使用過 React，那應該熟悉 React的生命週期。當 React在瀏覽器中執行時，顯示的生命週期從載入 React元件開始（圖 2-3）。

網頁顯示 程序

將 React 元件載入

DOM

顯示 React元件

圖 2-3　React中的元件載入

之後，React處理顯示與必要元件的顯示（圖 2-4）。

狀態 / 屬性改變

在 Virtual DOM 中計算差異

顯示 React元件

圖 2-4　React中的元件顯示

對顯示階段來說，開發者從 React元件的 render方法回傳 HTML標籤，然後 React於必要時直接顯示於網頁上。

對 React Native而言，生命週期是相同的，但顯示過程有一點不同，因為 React Native要依靠橋。我們之前已經在圖 2-2看過橋。橋轉譯 JavaScript呼叫並叫用平台的底層API 與 UI 元件（例如 Objective-C 或 Java）。由於 React Native 不在主 UI 執行緒上執行，它可以執行這些非同步呼叫而不會影響使用者體驗。

8 | 第二章

在 React Native中建構元件所有的 React程式碼都在 React元件中。React Native元件大部分與普通 React元件相同，一些重要的差別在於顯示與風格樣式。

使用 View撰寫網頁 React時，會顯示正常的 HTML元素（<div>、<p>、<a>等）。使用 React Native時，這些元素都以平台特定的 React元件取代（見表 2-1）。最基本的是跨平台的 <View>，它是簡單且有彈性的 UI元素，可以當做是 <div>的類比。舉例來說，<View>在 iOS上顯示為 UIView，在 Android上則是 View。

表 2-1　基本網頁元素與 React Native的比較

React React Native

<div> <View>

<span> <Text>

<li>、<ul> <ListView>

<img> <Image>

其他元件則是平台專屬的。舉例來說，<DatePickerIOS>元件（可預期的）顯示 iOS標準的日期選取元件。以下是來自 UIExplorer範例應用程式的一段程式碼，它展現出一個iOS日期選取元件。它的使用很直接，如你所預期：

<DatePickerIOS date={this.state.date} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}/>

這樣會顯示出標準的 iOS日期選取元件（圖 2-5）。

由於我們的 UI元素現在是 React元件，相較於 <div>等基本的 HTML元素，你需要明確的匯入每個想要使用的元件。舉例來說，我們需要這樣匯入 <DatePickerIOS>元件：

var React = require('react-native');var { DatePickerIOS} = React;

使用 React Native | 9

圖 2-5　DatePickerIOS如同名稱所述是 iOS專屬

UIExplorer應用程式是隨附於標準 React Native的範例程式（https://github.com/facebook/

react-native#examples），它能讓你檢視所有受支援的 UI元素。我建議你檢視 UIExplorer應用程式中的各種元素。它也展示出許多選項與互動。

平台專屬的元件與 API在文件中有特定的標籤，通常使用平台名稱前綴—

例如 <SwitchAndroid>與 <SwitchIOS>。

由於元件在平台上各有不同，如何建構你的 React元件在使用 React Native時變得更為重要。在網頁 React中，通常有混合的 React元件：一些管理邏輯與它們的子元件，以及其他顯示原始標籤的元件。如果你想要在使用 React Native時重複運用程式碼，維持這些類型元件的分離變得很關鍵。顯示 <DatePickerIOS>元素的 React元件很明顯的不能用於Android。然而，包裝相關邏輯的元件可以重複使用。所以，顯示用的元件可以根據平

台替換。如果想要，你也可以指定平台專用版本的元件，舉例來說，一個 picker.ios.js檔

案與一個 picker.android.js檔案。我們會在第四章的“平台專屬版本元件”一節涵蓋這一

部分。

使用 JSX在 React Native中，如同 React，我們使用 JSX加上控制它的標籤，與使用 JavaScript來撰寫放在一個檔案中的顯示。JSX在 React首次發表時遇到強烈的反應。對許多網頁開發者來說，根據不同技術分開檔案是理所當然的：你會將 CSS、HTML與 JavaScript檔案分開。將標籤、控制邏輯與樣式放在一個語言中令人困惑。

10 | 第二章

JSX重視分離關注高於分離技術。在 React Native中，這更是嚴格的強調。在一個沒有瀏覽器的世界中，為每一個元件統一樣式、標籤與行為到一個檔案中更為合理。因此，

你的 React Native中的 .js檔案實際上是 JSX檔案。如果你曾經在使用網頁 React時用過JavaScript，你會想要在使用 React Native時轉換的 JSX語法。

如果你之前從未見過 JSX，不用擔心，它相當簡單。以下是個純 JavaScript的 React網頁元件範例：

var HelloMessage = React.createClass({ displayName: "HelloMessage",

render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); }});

React.render(React.createElement(HelloMessage, { name: "Bonnie" }), mountNode);

我們可以使用 JSX 做更精簡的顯示。相較於呼叫 React.createElement並傳入一列HTML屬性，我們使用類似 XML的標籤：

var HelloMessage = React.createClass({ render: function() { // 相較於呼叫 createElement，我們回傳標籤 return <div>Hello {this.props.name}</div>; }});

// 此處我們不再需要呼叫 createElementReact.render(<HelloMessage name="Bonnie" />, mountNode);

兩者都會展開下列的 HTML到網頁上：

<div>Hello Bonnie</div>

原生元件樣式

在網頁上，我們使用 CSS設定 React元件樣式，如同對其他 HTML元素設定一樣。無論你喜歡或討厭，CSS是網頁必要的一部分。React通常不會影響我們撰寫 CSS的方

使用 React Native | 11

式。它讓它容易使用（合理、有用）行內樣式，並根據 props與 state動態的建構類別名稱，不然在我們如何處理網頁的風格樣式上，React是最不可知（agnostic）的。

非網頁平台有各種佈局與樣式設定的方式。幸好使用 React Native時，我們利用標準化方式設定樣式。橋接 React與平台的部分包括大幅精簡過的 CSS子集實作。此有限實作的 CSS主要依靠 flexbox佈局且專注於簡單化，而非實作出完整的 CSS規則。不像有支援各種瀏覽器的 CSS網頁，React Native能夠強制樣式規則的一致性。如同各種 UI元素，你可以在與 React Native一起發佈的 UIExplorer（http://bit.ly/1MXpGlK）這個範例

應用程式中看到很多受支援樣式的例子。

React Native還堅持使用以 JavaScript物件存在的行內樣式。React團隊在網頁 React應用程式之前就支持這種方式。如果你曾經在 React中體驗過行內樣式，應該很熟悉下面的語法：

// 定義樣式 ...var style = { backgroundColor: 'white', fontSize: '16px'};

// ...套用樣式var tv = ( <Text style={style}> A styled Text </Text>);

React Native也提供一些建構與擴充樣式物件的工具，讓行內樣式的處理變成更容易管理的過程。我們之後會在第五章討論。

看著行內樣式是否讓你虎軀一震？對有網頁背景者而言，這顯然違反了標準實踐。使用

樣式物件而非樣式表需要一些心理調整，而且改變你撰寫樣式的方式。然而，在 React Native中，這是很有用的轉換。我們會在第五章討論樣式的最佳實踐與工作流程。當你看到它們的運用時不要太驚訝！

平台 API網頁 React與 React Native之間最大的不同或許是我們思考平台 API的方式。在網頁上，要處理的問題通常是分裂與不一致的標準採用；但大多數瀏覽器支援常見的核心共

同功能。然而使用 React Native時，平台特定的 API在建構優雅、自然的使用者體驗時

12 | 第二章

扮演更重要的角色。還有許多選項必須考慮。行動 API包括資料存儲體、位置服務、存取相機等硬體。隨著 React Native擴展到其他平台，我們可以預期見到其他類型的API；舉例來說，React Native與虛擬實境頭盔的界面會是什麼樣子？

預設上，iOS與 Android的 React Native包括許多常見功能的支援，且 React Native也可以支援任何非同步原生 API，我們會在本書中檢視它們。React Native讓平台 API的使用變得直接與簡單，因此你可以自由的實驗。要思考什麼感覺對你的平台才是“正

確”的，並以自然的互動設計。

不可避免的，React Native的橋無法顯露平台所有的功能。如果你發現需要沒有支援的功能，你可以自行將其加入 React Native。或者，也許已經有人這麼做了，所以要查看社群是否將有支援。我們會在第七章討論這個部分。

還有要注意的是使用平台 API對重複使用程式碼會有影響。需要平台專屬功能的 React元件也只能是平台專用的。隔離與封裝這些元件會對你的應用程式帶來額外的彈性。當

然，這也適用於網頁：如果你計劃在 React Native與 React間共用程式碼，要記住 DOM等事物並不實際存在於 React Native中。

總結

在 React Native中撰寫行動元件與網頁 React有些不同。JSX是必要的，且我們的基本建構模塊是 <View>等而非 <div>等 HTML元素。樣式也有一點不同，根據的是 CSS的子集且使用行內語法指派樣式。然而這些調整都相當具有其可管理性。我們於下一章建

構第一個應用程式時實行它們。

第三章

建構你的第一支程式

這一章討論如何設置你的 React Native開發環境。然後會逐步建構一個簡單的應用程式並部署到你自己的 iOS或 Android裝置上。

設置環境

設置你的環境，讓你能夠跟著本書的範例進行並撰寫自己的應用程式。

React Native的安裝說明文件可以在 React Native官方文件網站（http://facebook.github.

io/react-native/）找到。此官方文件網站是特定安裝步驟的最即時參考，但我們在此也會

逐步進行。

你需要使用 Homebrew（http://brew.sh），它是常見的 OS X套件管理員，可安裝 React Native的相依檔案。這本書假設你是在 OS X上進行開發，這樣能讓你同時開發 iOS與Android應用程式。

安裝好 Homebrew之後，從命令列執行以下命令：

brew install nodebrew install watchmanbrew install flow

React Native套件使用了 node與 watchman，所以若以後套件給你製造麻煩，可以更新這些相依檔案看看。flow是 Facebook的型別檢查函式庫，也用於 React Native（如果你想要在 React Native專案中開啟型別檢查，你可以使用 flow）。