trunk-logo-white

最新消息

React Native 學習參考範例分享

Share This Post

分享在 facebook
分享在 linkedin
分享在 twitter
分享在 email

創科資訊目前技術能力,主要專注於 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 有關 😀

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 專案,非常值得一試!

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

產品資訊
tilda.lu

產品資訊

Ut Elit Tellus, Luctus Nec Ullamcorper Mattis, Pulvinar Dapibus Leo. Donec Sodales Sagittis Magna. Sed Consequat, Leo Eget Bibendum Sodales, Augue Velit Cursus Nunc, Quis Gravida Magna Mi A Libero. Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing.Ut Elit Tellus, Luctus Nec Ullamcorper Mattis, Pulvinar Dapibus Leo. Donec Sodales Sagittis Magna. Sed Consequat, Leo Eget Bibendum Sodales, Augue Velit Cursus Nunc, Quis Gravida Magna Mi A Libero. Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing.

閱讀更多 »

Do You Want To Boost Your Business?​

Drop Us A Line And Keep In Touch​