React Native 初心者攻略 (OS X)

由於 React 的火熱程度，身邊許多朋友都開始接觸 React ，我也推薦他們玩玩看 React Native ，我覺得 React 的入門門檻有些其實和 React 本身無關，像是 Webpack, Babel 等等都多少在無形中增加了入門的難度，且有許多範例可能還使用了 ES6 語法，雖然不是必要，但可能會造成初學者混淆、失去信心，使學習過程更不順利。

然而 React Native 完全就是一個超棒的東西，只要跟著官網的教學就可以很簡單的開始使用 React 撰寫跨平台的 App，不僅內建支援 ES6 ，還有 Live Reload , Hot Reloading 等強大功能, 甚至能在 Chrome 中 debug ，這些React Native 統統幫你包好了，省去了原先我們在 web 專案開發需要自行加入 webpack, babel 等等的處理過程。

環境建立

相關環境安裝的部分跟著 官網的詳細指示 (別擔心這裡有中文版) 操作就可以了，這部分就不多敘述

建立RN專案

$ npm install -g react-native-cli
$ react-native init AwesomeProject

iOS

環境準備

安裝 Xcode 即可

專案開發

有兩種方法

第一種是使用 Xcode ：

開啟專案目錄下的 /ios/AwesomeProject.xcodeproj （應該會以 Xcode 開啟）, 按左上角的播放圖示按鈕就會自動開啟 iPhone 模擬器和 Packager server ，並把專案 build 成 App 到模擬器中。

另一種是開啟 terminal 切換到專案目錄

$ react-native run-ios

這個指令可以不用開啟 Xcode 做和上面同樣的事情，一個指令解決，非常簡潔

接著你就可以開始編輯專案目錄下的 index.ios.js 開始開發你的專案。

Tips

在模擬器的 RN App 中你可以用快捷鍵 cmd+D 打開開發 Menu，這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。

若需要手動刷新可以使用熱鍵 cmd+R

另外，如果你有實體 Apple 裝置的話，也能夠直接在實體裝置上測試、開發

1. 將 Apple 裝置用USB線連接到電腦，並和電腦連接同一個 wifi

2. 將專案用 Xcode 開啟（上面的第一種方法）

3. 在 Xcode 左上角播放圖示的右方應該可以看到 寫著 Apple 裝置的選項，點按後選到自己的實體裝置

4. 打開 Xcode 左邊檔案管理的導覽列 Tree View，找到 AwesomeProject/AppDelegate.m 這個檔案打開來
   可以在裡面找到這段，相信看到註解大家應該都知道要怎麼做了，把 localhost 換成電腦的 ip 就可以了

   /**
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */
   jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

1. 按下 Xcode 左上角的播放鍵開始 Run 囉

Android 環境準備

由於目前我主要都是在 iOS 上開發， Android 部分還沒有很了解，如果有漏掉什麼還請各位大大提醒

Android 在 OS X 上的環境準備相對 iOS 來說稍微麻煩一點，但也不難
細心按照官方指示應該就能成功囉

參考這裡

開發準備

安裝完 Android SDK 和 Genymotion 之後

先打開 Genymotion 創建一個模擬器啟動

接著開啟 terminal 切到專案目錄下

$ react-native run-android

然後就可以編輯 index.android.js 開始開發了

在模擬器中按下 menu 按鈕可以打開開發 Menu ，這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。

如何使用別人寫好的 library, Package

我的同事 yaode 寫了一篇詳細完整的教學文章
大家可以參考看看

http://trunk-studio.com/blog/react-native-how-to-use-component/

記得有用到文章內的方法 link library 的話，是需要重新 build App 到模擬器才能正常運作的喔！（run-ios / run-android）

原文連結：http://kyoyadmoon.github.io/blog/2016/04/19/react-native-101/

作者介紹：DMoon