RN(React-Native)-通俗的說就是跨平台開發吧,一套代碼可以在安卓和ios上運行,針對ios而言其本質是對ios原生控件的一次封裝,然后通過js調用相關函數,視圖等。
1.視圖
移動端常用的視圖RN中都有相關的組件(在RN中移動端開發的視圖對應組件)對應。這里RN基礎的東西不做相關贅述。大家有興趣學習RN的可以在RN中文網上學習。里面相關的基礎的東西敘述相當清楚,只要一步一步按照上面的來,問題不大。
2.這里重點說一下我遇到的棘手的問題,開發需要和H5進行通訊,網上查找了很多資料,感覺實用的比較少,下面說一下自己這邊的開發。
原理簡述:RN和h5中相互交互是通過兩個方法:一個是onMessage(接收消息),一個是postMessage(發送消息),通過設置監聽(分別是圖1中的2和圖2中的2)來進行通信。
首先,你需要有一個Html文件,這個是你交互所必須的對象
html代碼截圖:(1.發送數據到RN,RN中設置了監聽就可以獲取到數據,要調用獲取的數據直接e.nativeEvent.data就可以拿到傳過來的數據;2.接收RN傳過來的數據,這個注意一點,經測試必須要同時寫上發送方法好像才能進行通信,才能接收RN傳過來的數據,測試不寫就收不到,這里希望高手看到的話可以指點一二。3.Html 的標簽語言,調用對應的方法,實現界面交互)
RN主要代碼截圖:(1.html的文件路徑,這里我寫的絕對路徑;2.設置監聽,獲取html傳過來的數據,這里eval對數據進行了處理,只能是字符串;3.獲取事件對象,進行相應的需求處理)
初學RN,有不足的地方請指教。最后通信這一塊推薦一片文章:H5與RN通信。這邊文章介紹很詳細,摩拜ing。