react-native 是facebook的一個跨平臺方案啸胧∫荼ⅲ可以開發(fā)出同時運行在Android 和iOS平臺的app硝烂，有著learn onece write everywhere 的口號企量。 它是用js語言調(diào)用原生接口俄周，利用React DOM dif算法進行高效渲染【吻辏可以實現(xiàn)接近原生的順滑效果旱易。
初學react-native(以下簡稱RN)是在官方網(wǎng)站上看的文檔禁偎，國內(nèi)有人翻譯成中文文檔，看懂英文的最好到facebook的官網(wǎng)去看阀坏，那里有個神奇的模擬器可以運行看看最終效果如暖，不過要想流暢地瀏覽還是需要把梯子。 文檔一般只是提供一些簡單的接口忌堂，要想快速掌握最好的方式是看別人寫的源碼盒至，既能快速了解框架的知識，還能看到別人優(yōu)秀的架構(gòu)思維士修。
我最開始看的項目是github上的react-native-nba-app枷遂，把所有代碼都看完基本上就知道該怎么做了。 瀏覽完源碼之后還是要進行實踐開發(fā)棋嘲，否則永遠只會停留在理論的層面酒唉。
react-native-GCore 模仿的是一款主機游戲資訊app機核
react-native-GCore的功能及特點:
- 有首頁，新聞沸移，文章黔州，電臺，視頻五個模塊展示
- 引入redux進行數(shù)據(jù)管理
- 下載喜歡的電臺節(jié)目進行本地播放
- 注冊和登陸阔籽，對主題進行評論
-
WebView與RN之間交互
最終效果如下圖所示:
picture one
picture two
開發(fā)過程
從建立項目到現(xiàn)在差不多用了兩個多月的時間流妻，而且是在公司沒有項目開發(fā)的時候做的。稍微懂點js和css就可以掌握RN的布局技巧笆制，但是react-native還是有不少坑人地方绅这。想要完美運行在Android和iOS上，還是要踩不少坑在辆。在github上就有很多未解的issues证薇。畢竟Android和iOS兩者底層機制不一樣。原生的接口和渲染機制都不相同匆篓， 短期內(nèi)的需求要想自己解決很難浑度，除非對兩個平臺都很熟悉自己封裝原生模塊。還有一個就是利用別人開發(fā)的插件鸦概，這些插件很多也是封裝了原生模塊箩张。
下面列出我在開發(fā)的時候碰到的問題：
- 項目中用到了WebView，機核里面需要原生和WebView交互窗市，在iOS下很簡單先慷，直接在iOS webView:shouldStartLoadWithRequest: navigationType:
對應RN中要實現(xiàn)onShouldStartLoadWithRequest
,但是android下就沒這么簡單了，我想到的是當運行的平臺是Android時給每個a標簽添加點擊事件咨察，通過點擊事件把私有鏈接返回給RN论熙。 涉及到在WebView和RN之間通信，在github上有個react-native-webview-bridge它是個WebView的extension摄狱，通過它提供的接口可以方便在兩者間進行通信脓诡。前幾篇有說到這個知識點无午，需要看的童鞋點這里 - android 無法獲取ListView上每個元素的相對坐標。
在播放音頻的時候需要在播放到某個時間軸的時候讓ListView
滾動到對應的cell祝谚，這時就要需要我們知道具體cell相對于ListView的坐標宪迟。文檔上并提到這個接口，搜了stackoverflow發(fā)現(xiàn)UIManager有個measure方法踊跟。具體使用如下:
import {UIManager,findNodeHandle} from 'react-native'
在cell里面實現(xiàn)
var hand = findNodeHandle(this)
UIManager.measure(hand,(x,y,w,h,px,py)=>{
console.log('x: '+x +' y:' + y )
})
這個方法在iOS可以正常使用踩验，但是在Android上 打印出來的x鸥诽，y都是undefined, github上#12966有人提示說加上 style={{opacity:1}}和 collapsable={false}商玫，經(jīng)實驗無效。
- Android 默認有
overflow:'hidden'牡借。 超出父控件的部分會被隱藏掉拳昌，而且是無法修改的。當父控件設置了borderRadius,子控件并不會被父控件的設置了borderRadius而被切掉钠龙，官方這里有說明這個問題是由于Android 渲染的特殊性導致炬藤。
4.下載文件使用react-native-fs,在iOS平臺下載一切順利，當在Android平臺下載時會阻塞UI碴里。 - 原版機核app首頁有滾動手勢傳遞沈矿，但是在RN上實現(xiàn)非常不流暢，因而取消了該設計咬腋，所以出現(xiàn)了最后開發(fā)完成的版本和原版有些許不一致羹膳。
項目仍有很多細節(jié)未完善，做開發(fā)需要的是耐心和踏實的腳步根竿，還要不斷學習給自己充能量陵像。項目暫時告了一段落 ，如果各位有一些更好的建議或者意見寇壳，希望大家提出來一起學習探討醒颖。喜歡的童鞋可以在github上點個star。
GCore項目地址
原文地址
