前言

透過網路的連結來發送請求、同步資料不只是網頁前端需要，對行動應用程式來說也是不可或缺。從這邊就可以看出 React Native 的巧思與精神，如何讓學習成本降到最低，輕鬆地讓網頁開發者寫出行動應用程式的網路請求。

HTTP

iOS 的開發者大概很少不知道 AFNetworking 這樣的一個 Networking 套件，但 JavaScript 的開發者應該大多都不知道。JavaScript 的開發者現在所熟悉的是 fetch 這樣的 API，而 React Native 就實作了一模一樣的 API 接口，所以可以直接在 React Native 環境中寫：

async function getMoviesFromApi() {
  try {
    const response = await fetch('https://facebook.github.io/react-native/movies.json');
    const responseJson = await response.json();
    return responseJson.movies;
  } catch(error) {
    console.error(error);
  }
}

像上面這樣使用 ES2017 async/await 也是沒關係的。

第三方套件

除了 fetch 之外，目前大家還可能會使用的 Universal HTTP Client，例如：axios、superagent 等等，大多是基於 XMLHttpRequest 這個古老且低階的 API 來實作的，而它也被 React Native 實作了一個跨行動平台的版本。所以儘管的直接使用它們吧！

SSL

要注意，iOS 預設會擋掉沒有使用 SSL 加密的請求，雖然可以在 Info.plist 加上例外的 Domain：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

不過不合理的可能會影響 Apple 上架的 Review，所以基於安全以及這個理由，應該盡量的使用 HTTPS。

WebSocket

React Native 也內建支援 WebSocket，可以直接在環境中這樣去連接：

const ws = new WebSocket('ws://host.com/path');

當然能無痛使用 socket.io 更是其一大優勢：

import socketio from 'socket.io-client';

const socket = socketio('http://localhost:3000');

A simple messaging app with React Native and Socket.io 這篇文章以及它的 Repo 提供了很好的範例跟介紹，有興趣的讀者可以參閱。

WebRTC

除了 WebSocket 以外，還有另一個也很重要的 W3C 標準 WebRTC，其中包括了：

• MediaStream：影音的串流
• RTCPeerConnection：點對點的連接
• Peer-to-peer Data：點對點的資料傳輸

尤其適合處理視訊串流、遠端會議等等功能，也是近年來瀏覽器的殺手功能之一。

react-native-webrtc 這個社群的專案良好的實作了跨 iOS、Android 的 WebRTC API，讓 React Native 的專案也能支援這個標準。

因此 rtc-everywhere Readme 所列的支援環境又多了 React Native，如此以來就能用 WebRTC 達成瀏覽器、Node、行動裝置之間的 P2P 溝通。

這個功能我想未來被納入 React Native 的核心應該也只是時間問題。

結語

React Native 實作一樣的標準介面帶給開發者低學習成本、一致的開發成本、跨平台可重用的程式碼，這是目前為止最令人驚豔的部分，不必為了 Call API 各寫一份 Objective-C 跟 Java 的程式碼，在開發上有極大的幫助。