摘要：仿又來了又寫了一個(gè)，別急呀，我可沒上次寫的代碼這是用寫的基本界面都已經(jīng)實(shí)現(xiàn)，當(dāng)然了，有些地方圖省事搞不定追求速度寫的，就自然會導(dǎo)致退而求其次的實(shí)現(xiàn)方式代碼結(jié)構(gòu)可能不太規(guī)范清晰可能還有呢我不聽我不聽項(xiàng)目地址我的個(gè)人主頁盡管風(fēng)光無限幾乎對各大

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

這是用ReactNative寫的《ONE》

基本界面都已經(jīng)實(shí)現(xiàn)，當(dāng)然了，有些地方圖省事(搞不定) + 追求速度寫的Demo，就自然會導(dǎo)致：

退而求其次的實(shí)現(xiàn)方式

代碼結(jié)構(gòu)可能不太規(guī)范/清晰

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

項(xiàng)目地址 => https://github.com/liuzho/ONE-RN

我的個(gè)人主頁 => https://liuzho.com

盡管Kotlin風(fēng)光無限幾乎對各大社區(qū)進(jìn)行了屠版，但我還是冒著被淹沒的風(fēng)險(xiǎn)把這個(gè)Demo發(fā)出來了，萬一有人看呢(逃..

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

如果你初學(xué)RN，那么幫助可能有限，請你點(diǎn)個(gè)贊/點(diǎn)個(gè)star，以備后續(xù)學(xué)習(xí)

如果你是RN大牛，那么請你點(diǎn)個(gè)贊/點(diǎn)個(gè)star，慢慢看，慢慢嘲諷我

如果你有一丟丟RN基礎(chǔ)，想練練手，那么請你點(diǎn)個(gè)贊/點(diǎn)個(gè)star，反正你也學(xué)不到啥略略略~~~

當(dāng)然了，國際慣例，甩預(yù)覽圖：

你需要這樣做：

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

cd ONE-RN

npm install//切記不要用cnpm！親測cnpm導(dǎo)致無法運(yùn)行

react-native run-ios or react-native run-android

理論上iOS(測試可用，部分組件如ToastAndroid不通用報(bào)黃)和Android都可以運(yùn)行

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

StackNavigator / TabNavigator的使用

你能看到的：底部Tab(TabNavigator)、第一個(gè)Tab內(nèi)類似viewPager滑動(dòng)(TabNavigator)、跳轉(zhuǎn)到用戶/搜索等界面(StackNavigator)

為什么不用ViewPagerAndroid來實(shí)現(xiàn)第一個(gè)Tab內(nèi)的滑動(dòng)呢，因?yàn)檫@個(gè)組件在iOS不能用啊...GitHub應(yīng)該有通用組件，我沒有去找，用TabNavgation算了吧

組件信息傳遞props / nav的router攜帶數(shù)據(jù)params這些

抽取了一個(gè)Toolbar組件，title的顯示通過props/router搞定，StackNavigator的router(項(xiàng)目內(nèi)appNavigation)通過props瘋狂傳遞給各個(gè)界面/組件    

通用控件的抽取

Toolbar、CdView等一些組件的抽取(我沒有刻意去做這件事，可能有些應(yīng)該抽取的控件我并沒有很好的抽取出來)

動(dòng)畫Animated

我承認(rèn)其實(shí)就一個(gè)假循環(huán)旋轉(zhuǎn)動(dòng)畫....CdView點(diǎn)擊按鈕旋轉(zhuǎn)，以前總結(jié)過Animated知識點(diǎn)現(xiàn)在全忘了...

WebView加載網(wǎng)頁并插入JS代碼

Detail頁面的內(nèi)容，由于想快點(diǎn)完成Demo，也覺得界面寫也就是一樣的，就沒自己實(shí)現(xiàn)，直接用了WebView加載相應(yīng)的WebApp頁面，然后通過`webView.injectJavaScript`插入我的JS代碼，將內(nèi)容中頭部和底部一些不需要的地方全部通過`Element.reoveChild`給移除掉了

ListView、fetch使用

關(guān)于ListView、fetch的使用我有寫過一篇文章：[ReactNative網(wǎng)絡(luò)fetch數(shù)據(jù)并展示在listview中](http://www.jianshu.com/p/22de6734d858)

那么為什么我沒有在這個(gè)基礎(chǔ)上實(shí)現(xiàn)下拉刷新、上拉加載、headerView、footerView呢？因?yàn)橛幸粋€(gè)FlatList完全支持這些做法！那又為什么我沒有用FlatList呢？！因?yàn)樵谖野l(fā)現(xiàn)FlatList的時(shí)候?yàn)闀r(shí)已晚，我已經(jīng)不想再修改之前寫了的代碼了....[FlatList中文文檔](http://reactnative.cn/docs/0.44/flatlist.html#content)

還有其他一些我一時(shí)也想不起來，你覺得都用到了啥？T_T求不打

感謝API哥們兒？這次你還冒出來不？

API：戳這里=>**[ONE的API](https://github.com/jokermonn/-Api/blob/master/ONEv3.5.0~.md)**

注：若侵犯《ONE》權(quán)利，我將及時(shí)刪除所有相關(guān)內(nèi)容

我將保持更新/優(yōu)化一段時(shí)間，畢竟還有一些細(xì)節(jié)沒完成，還有挺多需要優(yōu)化的地方

更多內(nèi)容歡迎訪問我的主頁或我的博客

覺得本文/本Demo對你有所幫助，請不要忘了點(diǎn)一下文末的"?"讓他變成"?"

當(dāng)然，也別忘了Star一下我的倉庫 => ONE-RN

學(xué)習(xí)就是耐住寂寞不斷踩坑，多動(dòng)手敲就能有更多的知識經(jīng)驗(yàn)和肩椎脊柱受損T_T