前言
本篇文章是對最近開源的純ReactNative項目OneM的使用補充說明,由于OneM項目中大量使用到Redux、Router-flux等框架的知識,對于初學者來說可能看起來有些吃力,不知道從何看起。所以作者打算寫一篇較詳細的OneM學習手冊。想查看OneM更詳細的項目介紹請點擊。歡迎大家
Star
OneM項目地址
https://github.com/guangqiang-liu/OneM
目錄
- 課前準備
- 項目文件夾目錄層級關系及作用
- react-native-router-flux路由框架詳解
- Redux框架詳解
- fetch網絡請求工具類封裝
- IconFont使用及如何自定義自己的font庫
- 螞蟻金服組件庫ant-D如何接入使用
- iOS、Android平臺UI錯亂如何優雅的解決
- 如何自定義基類Component及導航欄
- 表單提交的數據如何更優雅的自動校驗參數
- 仿網易音樂播放器如何設計的與封裝
- 仿愛奇藝視頻播放器如何設計的與封裝
- 實現微信、QQ分享、登錄功能
- ReactNative如何設計與實現AOP埋點
- 實現顏色漸變的導航欄效果
- 實現高斯模糊效果
課前準備
開發工具
- 現在市面上有很多開發工具可供選擇:例如(ws、sublime、Atom、vscode等)。這個根據個人喜好選擇不同的開發工具即可。
開發環境
- Node環境、react環境、nvm環境、javajdk環境
基礎知識
-
js常用語法
- js常用語法請參照W3C
-
es5、es6常用語法
請參考作者對es5、es6常用語法的總結:常用es5與es6語法總結
更多詳細的es6語法學習請參照:阮一峰老師ECMAScript 6 入門
-
flexbox盒子模型布局
- 請參照:阮一峰老師Flex布局詳解
項目文件夾層級關系及作用
根目錄文件夾示意圖
下面主要介紹src目錄
src目錄下的每一個子模塊在這里就不一一展開演示說明了,每一個文件夾都有其自己獨立的功能和含義,希望同學們自己私下認真的學習體會每一個文件目錄對應的功能特性。
react-native-router-flux路由框架詳解
學習react-native-router-flux路由框架請點擊
想直接運行Demo查看效果請點擊
更多更詳細的內容請查看官方Git
Redux框架詳解
學習Redux框架請點擊
想直接運行Demo查看效果請點擊
更多更詳細的內容請查看官方Git
fetch網絡請求工具類封裝
學習fetch請求工具類請點擊
想直接運行Demo查看效果請點擊
IconFont使用及如何自定義自己的font庫
學習IconFont以及如何自定義font庫請點擊
想直接運行Demo查看效果請點擊
查看官方IconFont使用指南請點擊
螞蟻金服組件庫ant-D如何接入使用
學習如何接入使用ant-D組件庫請點擊
想直接運行Demo查看效果請點擊
查看ant-D官方組件使用指南請點擊
iOS\Android平臺樣式錯亂如何優雅的解決
學習如何優雅的解決雙平臺樣式錯亂問題請點擊
想直接運行Demo查看效果請點擊
如何自定義基類Component及導航欄
學習自定義基類Component及導航欄請點擊
想直接運行Demo查看效果請點擊
表單提交的數據如何更優雅的自動校驗
學習表單如何自動校驗請點擊
想直接運行Demo查看效果請點擊
仿網易音樂播放器如何設計的與封裝
學習網易音樂播放器如何實現請點擊
想直接運行Demo查看效果請點擊
仿愛奇藝視頻播放器如何設計的與封裝
學習愛奇藝視頻播放器如何實現請點擊
想直接運行Demo查看效果請點擊
實現微信、QQ分享登錄功能
學習如何實現微信、QQ分享登錄功能請點擊
想直接運行Demo查看效果請點擊
實現顏色漸變的導航欄效果
學習如何實現顏色漸變的導航欄效果請點擊
想直接運行Demo查看效果請點擊
實現高斯模糊效果
學習如何實現高斯模糊效果請點擊
想直接運行Demo查看效果請點擊