我用了三天時間實現了一個相對比較完整的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找,非常方便。
總結
我很喜歡React Native的開發方式,將頁面變為一個個小組件,嵌套而成大組件,從而形成整個應用,它組件化的思想,讓我真正粉上了它。
如果迫於混合應用(Hybrid App)的效果差,又沒有人手做原生的應用的,真的可以考慮用它。
本文為原創文章,轉載請保留原出處,方便溯源,如有錯誤地方,謝謝指正。