我的第一個React Native App


我用了三天時間實現了一個相對比較完整的React Native 新聞發布類型的示例。應用做得很簡單,但大多React Native的組件都有用到,今天做一個分享(由於我電腦是Windows系統,所以只實現了Android部分,沒有對iOS做兼容),希望對初學者有用處。

實現界面

  

  

PS:頁面實現不多,數據也是靜態。

安裝啟動程序

看完上面的,可以直接到我的Github下載源碼在本地跑起來,我這個示例的地址是:

https://github.com/codingforme/react-native-demo-news

1. 下載源碼

可以用git clone或直接下載zip包,注意存放路徑不要有中文,否則命令執行會出錯。

2. 安裝node module

進入工程目錄安裝node module,命令行:

npm install

3. 安裝示例

插上真機或開模擬器來安裝示例,命令行:

react-native run-android

這樣就可以在手機上看到示例效果,可以結合代碼學習React Native的開發套路。

PS:這里是我假設你已經裝好React Native的開發環境。

額外組件

有些組件官方沒有提供(沒有Android版或者本身沒有),於是我在Github尋找了相應的UI組件來使用,分別有:

1. Tab組件(底部導航):react-native-tab-navigator

https://github.com/exponentjs/react-native-tab-navigator

2. ActionSheet菜單組件:react-native-actionsheet

https://github.com/beefe/react-native-actionsheet

3. 下拉刷新、加載更多列表組件 :react-native-gifted-listview

https://github.com/FaridSafi/react-native-gifted-listview

4. 滑動Tab組件:react-native-scrollable-tab-view

https://github.com/skv-headless/react-native-scrollable-tab-view

PS:沒有什么就上Github找,非常方便。

關鍵代碼
1.  頁面跳轉,Navigator組件使用部分。
2.  Android硬件的back鍵操作
3.  Android狀態欄沉浸式的設置
PS:不做代碼解析,可直接查看代碼,比較簡單。

總結

我很喜歡React Native的開發方式,將頁面變為一個個小組件,嵌套而成大組件,從而形成整個應用,它組件化的思想,讓我真正粉上了它。

如果迫於混合應用(Hybrid App)的效果差,又沒有人手做原生的應用的,真的可以考慮用它。

 

本文為原創文章,轉載請保留原出處,方便溯源,如有錯誤地方,謝謝指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5678056.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM