大家好，非常感謝大家百忙中抽時間來參加這次分享谈竿。也非常感謝XX的辛苦組織团驱。
React Native，是這兩年比較熱的新技術空凸。各大廠商紛紛專門安排團隊接入嚎花。
我們非常幸運，這次用RN開發(fā)了一個完整的產品旅行喵呀洲，現(xiàn)在和大家分享一下我們這次的技術實踐感受紊选。歡迎大家后面積極參與一起討論。向大家學習道逗。
首先兵罢，簡單地介紹一下我自己。
我在移動數(shù)據(jù)及監(jiān)控組滓窍。以前一直做iOS開發(fā)卖词，最近在做RN開發(fā)。
平時喜歡健身吏夯、看算法方面的書此蜈。歡迎大家找我一起健身和討論算法相關的話題。
旅行喵噪生，是一款幫助用戶快樂旅行的APP裆赵。
第一版的首打功能是行程定制，和景點信息介紹杠园。大家可以在上面做非常簡單的偏好選擇顾瞪，通過我們的智能算法生成適合自己的旅行路線。
為什么要用RN呢抛蚁？
首先，相對于其它可以方便熱更新的開發(fā)方式惕橙，RN在性能瞧甩、可擴展性、代碼維護上弥鹦，有一定的優(yōu)勢肚逸。
其次爷辙，在人力資源利用上，相對于Native開發(fā)朦促，也有一定的優(yōu)勢膝晾。我們最開始的時候只有3個人參與開發(fā)。后面為了讓更多人熟悉RN這個技術务冕，陸陸續(xù)續(xù)加了4?5個人進來血当。當然熟悉RN后又抽出去做其它項目了≠饕洌基本上臊旭，新加進來的人，只要一周就可以獨立開發(fā)÷嵬耍現(xiàn)在如果有一些簡單的迭代离熏，我自己一個人就可以快速完成iOS和Android兩個端的維護。
RN的高擴展性戴涝，得益于它可以同時復用JS組件和Native組件滋戳。這樣一來，大家現(xiàn)在手頭上比較成熟完善的Native已經實現(xiàn)的功能就只需要簡單引用啥刻，不用重復開發(fā)奸鸯。
對Native組件的復用，RN有兩種形式郑什，一種是不帶UI的原生模塊府喳。使用過程非常簡單。三步就完成Native端原生模塊的暴露蘑拯，兩步就完成JS端模塊方法的調用钝满。
另一種是帶UI的原生UI組件。使用過程也十分簡單申窘。無非是在Native端增加一個View子類弯蚜，和一個ViewManager子類。在JS端通常會把原生UI組件做成一個React組件再進行調用剃法。
剛才大家看旅行喵的介紹碎捺，可能也能猜到，旅行喵上面有大量的圖片贷洲。為了節(jié)省用戶流量和提高圖片加載速度收厨，我們做了圖片緩存的功能。在iOS和Android上分別通過原生UI組件的方式實現(xiàn)优构。
除了圖片以外诵叁，我們還做了簡單的數(shù)據(jù)緩存功能，主要用來存用戶的登錄信息，免除用戶經常重復登錄的麻煩翘簇。
RN剛開始出來的時候怒详，動畫功能很弱魂贬。經過多個版本迭代以后森枪，現(xiàn)在已經可以完成很多簡單的動畫病毡。
RN有兩個動畫組件雷滋。Animated適合做比較精細的視圖動畫控制平绩。LayoutAnimation比較適合做過場動畫恭垦。
我們在開發(fā)過程中快毛，碰到了一個比較麻煩的手勢響應傳遞的問題。列表署照，本身是支持上下滾動手勢的祸泪。但，當我們在單元格上增加了左右滑動的手勢后建芙，發(fā)現(xiàn)單元格的手勢把列表的手勢響應完全攔載了没隘。
后來，我們把小于45度角的手勢定義為左右滑動禁荸，交給單元格響應右蒲。大于45度角的手勢定義為上下滾動，交給列表響應赶熟。解決手勢響應沖突的問題瑰妄。
旅行相關APP，自然少不了地圖映砖。
我們把第三方地圖SDK做成原生UI組件间坐。然后在JS端做成React組件。
這樣就可以非常方便地和RN的標準組件嵌套實現(xiàn)功能頁面邑退。
為了更好地向用戶展示景點信息竹宋。我們接入了RN視頻組件react-native-video。
RN組件地技，使用非常方便蜈七，只需要一個命令就可以把它接入到工程。
我們在react-native-video的基礎上莫矗，封裝了加載視頻預覽圖和播放按鈕的功能飒硅。
旅行喵的用戶除了可以使用APP自帶的頭像以外，還可以自定義自己的個性化的頭像作谚。
為了實現(xiàn)這個功能三娩，我們接了一個圖像選擇器組件。它具有拍照和訪問手機相冊的功能妹懒。
選完圖片尽棕，我們還要上傳到服務器。我們接了一個文件上傳RN組件彬伦。大家可以瀏覽一下右邊代碼滔悉，使用非常簡單。
旅行喵為了最大限度地讓用戶盡可能無障礙體驗APP的功能单绑，我們絕大多數(shù)的操作回官，都不需要用戶進行登錄。那么用戶在未登錄狀態(tài)下的操作搂橙，怎么在登錄后和用戶帳號綁定呢歉提？
我們通過用戶設備信息來進行綁定。
除了操作綁定以外区转，我們每個請求都會給后端帶上用戶設備信息苔巨，方便后臺做相應的用戶數(shù)據(jù)錄入。
iOS平臺不支持直接加載顯示GIF圖片废离，這導致RN在iOS平臺也無法直接加載顯示GIF圖片侄泽。
我們在iOS平臺上做了一個GIF加載原生UI組件。然后在JS端做成React組件蜻韭。這樣就可以非常方便地和RN的標準組件嵌套使用悼尾。
除了前面講到的比較大的功能，RN里面也有很多比較小的但非常實用的功能肖方、UI組件闺魏。
比如可以做倒計時的Timer組件。用來做驗證碼發(fā)送倒計時啊俯画，或者其它有時間限制的功能析桥，都非常好用。
RN剛開始出來的時候艰垂，很多人都擔心屏幕適配方面會不會很麻煩泡仗。
我們開始做項目的時候，業(yè)界還沒有什么成熟的方案提出來材泄。
我們和設計師協(xié)商之后沮焕，決定以6 Plus為基準，通過一套機制把設計文檔上標注的像素轉換不同設備類型的像素點進行適配拉宗。
旅行喵上面有大量的圖片加載峦树。有部分圖片相對大一點，有時候會出現(xiàn)加載慢旦事，甚至加載失敗的情況魁巩。
我們通過Image組件的接口對圖片加載過程進行的監(jiān)控。實現(xiàn)了默認圖片姐浮，開始加載谷遂，加載成功，加載結束卖鲤，加載失敗后的重新加載的自定義處理肾扰。提升了整個APP圖片加載的體驗畴嘶。
RN最開始的版本，崩潰率特別高集晚，動不動就紅屏窗悯。當然，現(xiàn)在迭代了這么多個版本后偷拔，穩(wěn)定了很多蒋院。
如果你不想讓APP在用戶面前出現(xiàn)紅屏，可以使用異常捕獲組件ErrorUtils暫時解決莲绰。當然欺旧，你應該建立一套異常記錄和上報的機制，保證自己事后可以去跟蹤解決問題蛤签。
在開發(fā)階段辞友，我們可以在一些不應該走的分支里通過throw new Error主動拋出異常，來避免寫出不夠健壯的代碼顷啼。在提交代碼前踏枣，要記得把相應的throw去掉。
在開發(fā)的過程中钙蒙，必然需要對代碼進行調試茵瀑。RN的調試也非常方便，在開發(fā)者菜單上開啟瀏覽器調試就可以輸出相應的Log信息躬厌。
我們比較習慣在Chrome上調試马昨，在Sourse標簽可以看到源碼和Log輸出，也可以打印相關的對象和變量扛施，還能設置斷點和單步執(zhí)行鸿捧。非常方便。
除了用模擬器調試之外疙渣，我們還可以進行真機調試匙奴。要保證手機和JS的服務在同一個WIFI下。
功能開發(fā)完了妄荔，除了在自己的開發(fā)機上運行測試泼菌。我們還可以給同事打個包，把JS文件安裝到同事的手機上啦租，讓他們幫忙測試體驗哗伯。
打離線包，只需要一個命令: react-natvie bundle篷角。通過命令參數(shù)焊刹，指定入口文件、輸出文件、平臺虐块、資源文件俩滥、是否開啟開發(fā)模式。
打包過程非撤橇瑁快举农，旅行喵整個APP的JS文件，只需要18秒就可以打包完敞嗡。
給同事裝上JS文件后，如果我們想更新航背，怎么辦呢喉悴？
我們有一套熱更新的方案。分三步走玖媚。
第一步箕肃，上傳打包好的jsbundle文件，并設置對應的JS版本號今魔。后端維護一個根據(jù)設備類型對應JS版本的表勺像。包括設備類型、版本號错森、jsbundle文件下載地址吟宦。客戶端維護一個.plist文件涩维，里面存儲JS版本號和對應的jsbundle文件本地路徑殃姓，還有當前版本號、回滾版本號瓦阐、版本黑名單等蜗侈。
第二步，在APP每次啟動睡蟋，客戶端加載當前版本號對應路徑的jsbundle文件踏幻，并且提供設備類型、當前版本號發(fā)JS文件更新請求戳杀。后端返回設備支持的最新版本號及jsbundle文件下載地址该面。客戶端檢查最新版本信息豺瘤，如果最新版本不在黑名單吆倦，把最新版號設置為當前版本號。
第三步坐求，在下次啟動APP的時候蚕泽，客戶端加載最新版本，完成更新。如果APP啟動崩潰须妻，把當前版本號加入到黑名單仔蝌，并回滾版本。
旅行喵的RN實踐荒吏，大概就是前面講的內容敛惊。這里面還有很多技術細節(jié)可以一起探討交流，但時間有限绰更，我就先分享到這里瞧挤。歡迎大家隨時找我和我們團隊的人交流。
可能有些同事之前只是聽說儡湾，但還沒有怎么接觸過RN√靥瘢現(xiàn)在RN的資料比之前豐富了很多，大家可以看看相應的文檔徐钠、書籍癌刽，就可以完成簡單的RN開發(fā)。也可以去參加一些RN的技術社區(qū)和業(yè)界朋友交流互動尝丐。
最后显拜，我們旅行喵項目開發(fā)積累了一些通用的功能組件，比如地圖爹袁、視頻远荠、圖片緩存等等，后面也會整理出來分享給大家呢簸。
我的分享矮台，到此結束，謝謝大家參與根时。
大家如果有什么疑問瘦赫，歡迎提出來，我們一起探討蛤迎，互相學習确虱。
謝謝！
