ReactNative仿《ONE》APP

仿《ONE》APP又來了！

又寫了一個《ONE》，別急呀，我可沒copy上次寫的代碼~

這是用ReactNative寫的《ONE》

基本界面都已經實現，固然了，有些地方圖省事(搞不定) + 追求速度寫的Demo，就天然會致使：

1. 退而求其次的實現方式

2. 代碼結構可能不太規範/清晰

3. 可能還有bug呢(我不聽我不聽)

項目地址 => https://github.com/liuzho/ONE-RN

個人我的主頁 => https://liuzho.com

儘管Kotlin風光無限幾乎對各大社區進行了屠版，但我仍是冒着被淹沒的風險把這個Demo發出來了，萬一有人看呢(逃..

沒事，ReactNative自有魅力！(各類技能全給你學了管你誰有魅力).....

這個Demo對你有沒有幫助？

若是你初學RN，那麼幫助可能有限，請你點個贊/點個star，以備後續學習

若是你是RN大牛，那麼請你點個贊/點個star，慢慢看，慢慢嘲諷我

若是你有一丟丟RN基礎，想練練手，那麼請你點個贊/點個star，反正你也學不到啥略略略~~~

預覽

固然了，國際慣例，甩預覽圖：

在你的電腦上運行

你須要這樣作：

1. git clone https://github.com/liuzho/ONE-RN.git

2. cd ONE-RN

3. npm install//切記不要用cnpm！親測cnpm致使沒法運行

4. react-native run-ios or react-native run-android

理論上iOS(測試可用，部分組件如ToastAndroid不通用報黃)和Android均可以運行

項目狀況

"react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-navigation": "^1.0.0-beta.9"

1. StackNavigator / TabNavigator的使用

   你能看到的：底部Tab(TabNavigator)、第一個Tab內相似viewPager滑動(TabNavigator)、跳轉到用戶/搜索等界面(StackNavigator)
   
   爲何不用ViewPagerAndroid來實現第一個Tab內的滑動呢，由於這個組件在iOS不能用啊...GitHub應該有通用組件，我沒有去找，用TabNavgation算了吧

2. 組件信息傳遞props / nav的router攜帶數據params這些

   抽取了一個Toolbar組件，title的顯示經過props/router搞定，StackNavigator的router(項目內appNavigation)經過props瘋狂傳遞給各個界面/組件

3. 通用控件的抽取

   Toolbar、CdView等一些組件的抽取(我沒有刻意去作這件事，可能有些應該抽取的控件我並無很好的抽取出來)

4. 動畫Animated

   我認可其實就一個假循環旋轉動畫....CdView點擊按鈕旋轉，之前總結過Animated知識點如今全忘了...

5. WebView加載網頁並插入JS代碼

   Detail頁面的內容，因爲想快點完成Demo，也以爲界面寫也就是同樣的，就沒本身實現，直接用了WebView加載相應的WebApp頁面，而後經過`webView.injectJavaScript`插入個人JS代碼，將內容中頭部和底部一些不須要的地方所有經過`Element.reoveChild`給移除掉了

6. ListView、fetch使用

   關於ListView、fetch的使用我有寫過一篇文章：[ReactNative網絡fetch數據並展現在listview中](http://www.jianshu.com/p/22de6734d858)
   
   那麼爲何我沒有在這個基礎上實現下拉刷新、上拉加載、headerView、footerView呢？由於有一個FlatList徹底支持這些作法！那又爲何我沒有用FlatList呢？！由於在我發現FlatList的時候爲時已晚，我已經不想再修改以前寫了的代碼了....[FlatList中文文檔](http://reactnative.cn/docs/0.44/flatlist.html#content)

7. 還有其餘一些我一時也想不起來，你以爲都用到了啥？T_T求不打

8. 感謝API哥們兒？此次你還冒出來不？

   API：戳這裏=>**[ONE的API](https://github.com/jokermonn/-Api/blob/master/ONEv3.5.0~.md)**
   
   注：若侵犯《ONE》權利，我將及時刪除全部相關內容

9. 我將保持更新/優化一段時間，畢竟還有一些細節沒完成，還有挺多須要優化的地方

結語

• 更多內容歡迎訪問個人主頁或個人博客

• 以爲本文/本Demo對你有所幫助，請不要忘了點一下文末的"♡"讓他變成"❤"

• 固然，也別忘了Star一下個人倉庫 => ONE-RN

• 學習就是耐住寂寞不斷踩坑，多動手敲就能有更多的知識經驗和肩椎脊柱受損T_T