前言
本人有近十年的技術(shù)背景袍辞，除了APP開發(fā)之外對后端墨缘、前端等都比較熟悉袁滥，近期做一個APP項(xiàng)目需要IOS盖桥、Android兩個平臺都需要灾螃，只能硬著頭皮上题翻。其實(shí)很早就想開發(fā)APP也很早就接觸Android、IOS原生開發(fā)、Hybrid嵌赠、HTML5 WebAPP等開發(fā)但一直也沒有做一個完整的項(xiàng)目塑荒，更多只是技術(shù)上的驗(yàn)證和嘗試。這回利用這個項(xiàng)目機(jī)會成功的基于RN技術(shù)發(fā)布了IOS和Android兩個平臺的APP姜挺，項(xiàng)目周期由于IOS審核（第一次提交審核齿税，修改了四次才通過）和自己假期的時間用了一個半月，實(shí)際用于項(xiàng)目代碼的開發(fā)大概是一個月的時間炊豪。
APP功能
由于是商業(yè)項(xiàng)目不能透露太多信息凌箕，APP功能包含列表頁、搜索頁词渤、HTML5游戲牵舱、HTML Web頁面還有圖片的應(yīng)用，以下為應(yīng)用界面截圖缺虐。如需APP進(jìn)行測試請加留言或者發(fā)我郵件：cbcye#live.com
選型
? ? ? ?之前說過我有一個定的技術(shù)背景也嘗試過各種不同的開發(fā)方式芜壁。基于APP的功能需求我可以都采用原生的方式或者Hybrid的方式或者HTML5的方式高氮。首先慧妄，由于IOS和Android都需要發(fā)版而且我也沒有時間從零開始學(xué)習(xí)IOS和Android的開發(fā)其實(shí)之前也嘗試著學(xué)習(xí)但最大的問題基于是這兩種原生方式的界面布局給我最大的障礙，語言剪芍、語法對一個有經(jīng)驗(yàn)的程序員來說問題不大塞淹，一般來說像UI布局語法和框架是最大的門檻。其次對由于有一些原生操作硬件的接口需求所以也沒有采用純HTML5 WebAPP的方式罪裹。
? ? ? ?重點(diǎn)介紹Hybrid的開發(fā)方案, 幾年前接觸過PhoneGap+JQuery Mobile窖铡、Sencha Touch學(xué)習(xí)了一段時間還有嘗試PhoneGap+JQuery Mobile做一個小的內(nèi)部應(yīng)用，但由于在PhoneGap+JQuery Mobile在Android下兼容問題太多放棄了坊谁；Sencha Touch封裝得太厲害费彼；Ionic使用的Angular JS學(xué)習(xí)了一段時間還是不能順手所以也放棄了（所以說框架的學(xué)習(xí)成本其實(shí)要高過于語言本身）還有一點(diǎn)最重要的是這些Hybrid產(chǎn)品或框架封裝的太封閉了導(dǎo)致如果有問題的話你就很難去解決。這就是我為什么這次選型放棄這些Hybrid方案的原因口芍，當(dāng)然這些經(jīng)驗(yàn)最近的也是一年前了箍铲，早的還在四、五年前的印象了不一定符合再在情況鬓椭，但由于也沒有更多的時間了解所以就先放棄了颠猴。
?最后無意中搜索到React Native讓我眼前一亮，RN的介紹自己去搜索一下小染，我這里只講我選型的考慮：
1翘瓮、RN是Facebook的項(xiàng)目，一個開源項(xiàng)目有大團(tuán)隊的維護(hù)是相當(dāng)?shù)闹匾?/p>
2裤翩、RN采用的方式是在JS去調(diào)用原生模塊的方式理論上來說一般情況下性能應(yīng)該比較接近原生（這一點(diǎn)在一些測試報告上也有相應(yīng)的說明）资盅，當(dāng)然這種方式的工作量非常龐大。
3、社區(qū)太活躍了呵扛，官方版本兩周發(fā)布一次每庆，在開發(fā)過程中的問題也能有人及時解答
另外之前沒有用過這相框架沒有有足夠的好奇心，試了一下感覺還可以今穿，試著試著就到發(fā)版了缤灵。
開發(fā)過程
如何入門
? ? ?俗話說磨刀不誤砍柴工，但是做一個項(xiàng)目其實(shí)也沒有太多的時間來讓你好好學(xué)習(xí)技術(shù)蓝晒，所以就需要快速入門腮出，還好有一大波前輩已經(jīng)整理出來學(xué)習(xí)筆記和分享了，對我來說幫助最大的是東方耀老師的視頻系列(免費(fèi)版）芝薇，兩天看了50集基本上JSX語法+RN的基本知識就算掌握了讼载，另外還購買了RN中文網(wǎng)一個月的付費(fèi)群服務(wù)(90元/月）鼻吮，主要有技術(shù)坑的時候等社區(qū)的人回答效率是很低的眷蚓，特別是剛開始的時候有專家?guī)兔獯鹨幌聲?jié)省很多時間阀圾，后來也確實(shí)證明非常有效。最后在開發(fā)過程中還花了300多RMB購買了一個印度團(tuán)隊的Native Starter Pro作為開發(fā)框架和UI框架灭红，有時間也可以基于他們免費(fèi)版的Native Starter Kit來開發(fā)侣滩，不過這個主要是節(jié)省了Redux的學(xué)習(xí)時間，直接上框架立馬能用即使我不知道Redux是如何工作的变擒。
開發(fā)方法
開發(fā)方法也很重要君珠，由于是使用新技術(shù)很容易出現(xiàn)一個問題解決不了的話就有可能要放棄該技術(shù)或者某個方案，我在之前就嘗試用RN做一個WebView的框架封裝但是在涉及到原生WebView與JS之前的通訊還有調(diào)用手機(jī)的一些功能比如保存圖片到相冊和選擇相冊圖片的時候由于對RN不熟悉就只能放棄全部基于WebView的方式來做娇斑。而且有可能一個功能需求用IOS的技術(shù)方案實(shí)現(xiàn)了但是在Android下卻不支持或者遇到問題的時候能不能解決策添，該項(xiàng)目過程中就遇到Android中WebView性能低且碎片化嚴(yán)重的問題。
所以正確的開發(fā)姿勢是針對重點(diǎn)功能做技術(shù)驗(yàn)證而且分別是對IOS和Android兩個平臺都做毫缆，而不是急于按照功能模塊來進(jìn)行開發(fā)唯竹。然后再一步一步夯實(shí)功能模塊。如果功能技術(shù)驗(yàn)證通過了先完成IOS版本再做Android版本（乘著審核的時間做Android版本）苦丁。
那些技術(shù)坑
1浸颓、ListView性能問題
ListView性能問題之前在做驗(yàn)證的時候沒有感覺，但是把數(shù)據(jù)往上加的時候就出現(xiàn)了旺拉，如下圖所示帶圖片产上、標(biāo)題、描述和按鈕的列表項(xiàng)目蛾狗，在300條數(shù)據(jù)的時候就會出現(xiàn)非辰粒卡的情況IOS比Android更嚴(yán)重經(jīng)嘗試各咱辦法無效只能在需求上做調(diào)整將數(shù)據(jù)減少到50條，以獲得較好的體驗(yàn)沉桌。在項(xiàng)目中臨時使用SGListView替代官方的ListViwe谢鹊。目前這個問題到RN 0.33版本還未解決,暫時也沒有從原生源碼的方面去著手解決等著官方出解決方案（官方已經(jīng)提上日程了）
2算吩、IOS加載圖片問題
由于RN都是靠一個JS主進(jìn)程在跑因此在APP第一次啟動后加載網(wǎng)絡(luò)數(shù)據(jù)和圖片的時候并不能一次性全部顯示只能一個個顯示甚至好長時間才能顯示全部圖片，而且這個問題在IOS上比在Android上更加明顯撇贺。這個問題暫時也沒有解決赌莺。
3冰抢、性能問題
關(guān)于性能問題強(qiáng)烈建議先閱讀官方文檔關(guān)于性能的優(yōu)化建議再來說性能好不好的問題松嘶，特別是文檔中提到的使用InteractionManager.runAfterInteractions回調(diào)的方式來處理耗時任務(wù)使UI不明顯卡鈍效果非常明顯，不要在調(diào)試的時候去測試性能挎扰，在IOS下可以使用release模式來測試性能翠订。
4、WebView性能問題
WebView由于在項(xiàng)目中有大量的場景需要用到因此也是重中之重遵倦，IOS上該問題小一點(diǎn)尽超，除了在開發(fā)期間覺得自帶的WebView占用內(nèi)存大之外（實(shí)際Release版本內(nèi)存占用可以接受）別的倒是可以接受，當(dāng)然在IOS上也可以使用wkwebview來替代梧躺，但是由于當(dāng)時不會擴(kuò)展JS讀取WKWebView的頁面Title屬性（實(shí)時不是剛加載完成的Title）,因此只能使用默認(rèn)的webview似谁。
但是WebView的問題在Android平臺上變得突出起來，后來沒有辦法只能通過封裝Crosswalk Xwalk webview的方式來提供并結(jié)合開源項(xiàng)目：react-native-crosswalk-webview和react-native-webview-bridge?兩個項(xiàng)目在crosswak webview的項(xiàng)目上擴(kuò)展增加了讀取webview當(dāng)前Title的方法（之前還走過彎路想變更webview-bridge使用crosswalk的webview但復(fù)雜度高失敗就放棄了掠哥。）
5巩踏、應(yīng)用包大小
IOS打包完成的時候包大小是十幾M，感覺能接受而且要盡快提交給蘋果審核所以沒花時間優(yōu)化续搀，帶熱更新功能塞琼。
Android的apk包由于封裝了crosswalk變得包異常大，arm和x86兩個版本的包為52M左右禁舷，只編譯arm版本的包為27M彪杉，如果沒有封裝crosswalk的話包大小只有5.3M左右（刪除了無用的字體和優(yōu)化了圖片），說明RN的包大小是可以接受的牵咙。
總結(jié)
在這開發(fā)的一個月時間里其實(shí)有很多次都想擔(dān)心會遇到無法填完的坑而失敗派近，好在這個框架比較給力基本上你只需要學(xué)習(xí)一部分知識就可以解決具體的問題而不是全部都要學(xué)習(xí)。由于我沒有做過原生的開發(fā)所以沒有像一部分原生程序員對Hybrid框架那么“吹毛求疵”洁桌，也沒有像一部分前端程序員覺得學(xué)習(xí)成本太高曲線太陡构哺。只是做為一個用戶來講用RN開發(fā)的程序體驗(yàn)?zāi)艽騻€70分，做為一個程序員來講RN的理念如果你想IOS和Android兩個平臺都復(fù)用代碼的話我覺得是比較不錯的思路和框架了战坤，本項(xiàng)目自主寫的代碼復(fù)用在90%以上曙强。
所以強(qiáng)烈推薦你的下一個APP采用RN來進(jìn)行開發(fā)！
