react-native 初體驗 - 使用 javascript 來寫 iOS app

去年年初寫了一個 chrome 擴展「十閱」後，一直想寫個十閱 app 出來，奈何懶癌後期，一直拖到最近才完成原型。

其實很早以前就已經寫過一個 hybrid app 了，使用了 Ionic 框架，這是一款使用前端 web 技術來構建 app 的框架。使用了流行的 Angular，使用 Cordova 來使用 native 的功能，最讚的是它有一套優美的設計模板，相似於 bootstrap，經過它你能夠輕鬆實現優雅漂亮的設計。

若是你熟悉 Angular 和 Cordova，基本上很是容易上手。我花了 3 天完成了 app（1天解決 HTML DOM 解析問題，1天解決調用系統瀏覽器打開連接問題）。

此次心血來潮（閒的蛋疼），想起去年年初就有所耳聞的 react-native，因而就打算用它來耍耍。

準備開發環境

1. OS X，開發 iOS 必須使用 OS X 系統

2. 裝好最新版本的 Node.js

3. 安裝 watchman （推薦使用 Homebrew 來安裝watchman）

4. 安裝 Xcode 最新版

快速開始

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

運行iOS應用

• $ cd AwesomeProject

• $ react-native run-ios 或者 用XCode打開ios/AwesomeProject.xcodeproj並點擊Run按鈕。

• 使用你喜歡的文本編輯器打開 index.ios.js 並隨便改上幾行。

• 在iOS Emulator中按下⌘-R就能夠刷新APP並看到你的最新修改！

基本上到這一步，你均可以看到你的第一個 react-native 應用運行起來了。

前方高能

開發流程我就不贅述了，有詳細的文檔能夠看，可是有幾個開發過程當中的困擾我仍是要說一下。

Navigator，這個東西對新手來講稍微有點複雜，文檔也看不大明白，我是看了新手理解Navigator的教程

jsdom-jscore，這個是用來解析 DOM 的，可是做者好像不維護了，就爛尾了，還好有個哥們 fork 了一份並作了一些修復，在他的基礎上，我終於裝好了這個插件。

使用連接庫

在設備上運行

用 Chrome 來斷點調試 地址 http://localhost:8081/debugger-ui

學習資源

51 ReactNative Examples

https://facebook.github.io/react-native/

https://github.com/soliury/noder-react-native

圖圖圖