React Native 學習參考範例分享

創科資訊目前技術能力,主要專注於 Web 的開發,所專精的開發語言以 Java 以及 Node.js 為主,說到 Node.js 也就必須熟悉 Javascript,對於前端,使用合適的框架也是必須的。

而這一兩年 React 為 web 前端火紅的技術,目前前端的應用已經成熟,且在最近也進入穩定的版本,對於擅長 Web 應用的我們,App 開發一直找不到合適的切入點,而 React Native 剛好可以讓我們用比較接近 Javascript 語言特性,來進行 App 的研發,身在這樣的時代,真是 Web 開發者的福氣 :)。

不過就像學習一個新的語言或跟 UI 有關的技術總是要先找看看有沒有不錯的學習資源可以參考,比如說別人已經完成的做品,或是 可運行的範例,如此才能從可以動的東西,快速學習!下面將分享幾個還不錯的專案,並且大致介紹一下特性。

React Native UI Sample

UIExplorer 這個範例可以讓你看到使用 React Native 可能的 UI 元件。

安裝方式

git clone https://github.com/facebook/react-native.git  
cd react-native  
npm install  

執行完上述步驟後 使用 Xcode 開啟 Examples/UIExplorer/UIExplorer.xcodeproj

即可看到下面的畫面

各種可能的 UI 呈現方式都可以把玩一下

dribbble-app

這是另外一個可以把玩一下的 Sample: react-native-dribbble-app,執行方式也跟 UIExplorer 差不多,如下:

git clone git@github.com:catalinmiron/react-native-dribbble-app.git  
cd react-native-dribbble-app  
npm install  

使用 XCode 開啟 DribbbleApp.xcodeproj,其執行畫面如下:

是一個可以快速入門的 React Native Sample,也蠻值得推薦的。

另外再加上兩個屬於架構的 Sample,都跟 Redux 有關 :D

React Native Redux Counter

example-react-native-redux,小小的 Sample 但卻把 redux 的整合做了一個小型示範,作為初始專案蠻適合的。

snowflake

snowflake 此 repo 蠻多人參考的,其專案特性如下:

A React-Native Android iOS Starter App/ BoilerPlate / Example with Redux, RN Router, & Jest with either Parse.com or Hapi server locally or on OpenShift for the backend http://bartonhammond.github.io/snowflake/snowflake.js.html

算是蠻完整的 React Native 專案,非常值得一試!

學習一個新的語言,新的技術,除了自己摸索,看相關書籍或資料,有個 可運行的範例 更可以讓學習速度更加快速,這就像畫畫或寫書法一樣,有個作品可以臨摹,先有樣學樣,站在前輩的肩膀上,將可以看得更高更遠,將我們找到的學習資源,與大家進行分享!