RN系列：Android原生與RN如何交互通信

React Native在Android混編項(xiàng)目中的頁面跳轉(zhuǎn)和方法調(diào)用大致可以通過上面這張簡圖來描述下：

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),方城企業(yè)網(wǎng)站建設(shè),方城品牌網(wǎng)站建設(shè),網(wǎng)站定制,方城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,方城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

RN通信原理簡單地講就是，一方native（java）將其部分方法注冊成一個(gè)映射表，另一方（js）再在這個(gè)映射表中查找并調(diào)用相應(yīng)的方法，而Bridge擔(dān)當(dāng)兩者間橋接的角色。

其實(shí)方法調(diào)用大致分為2種情況：

RN調(diào)用Android需要module名和方法名相同，而Android調(diào)用RN只需要方法名相同。

（1）RCTDeviceEventEmitter 事件方式

優(yōu)點(diǎn)：可任意時(shí)刻傳遞，Native主導(dǎo)控制。

（2）Callback 回調(diào)方式

優(yōu)點(diǎn)：JS調(diào)用，Native返回。

缺點(diǎn)：CallBack為異步操作，返回時(shí)機(jī)不確定

（3）Promise

優(yōu)點(diǎn)：JS調(diào)用，Native返回。

缺點(diǎn)：每次使用需要JS調(diào)用一次

（4）直傳常量數(shù)據(jù)（原生向RN）

跨域傳值，只能從原生端向RN端傳遞。RN端可通過 NativeModules.[module名].[參數(shù)名] 的方式獲取。

注意： RN層調(diào)用NativeModule層進(jìn)行界面跳轉(zhuǎn)時(shí)，需要設(shè)置FLAG_ACTIVITY_NEW_TASK標(biāo)志。

例如下分別以 原生調(diào)用RN 和 RN調(diào)用原生 為例簡單描述下：

需要添加facebook的兩個(gè)圖片加載庫：(注意版本號(hào)盡量與你使用的RN版本內(nèi)部使用的fresco版本保持一直)

如何愉快地調(diào)試一個(gè) React Native for Android APP

首先確保你的電腦和手機(jī)設(shè)備在同一個(gè)Wi-Fi環(huán)境下。其次你需要開啟USB調(diào)試才能在你的設(shè)備上安裝你的APP。一定要確定你已經(jīng)打開設(shè)備的USB調(diào)試開關(guān)!確保你的設(shè)備已經(jīng)被成功連接，可以輸入adbdevices核實(shí):在右邊那列看到device說明你的設(shè)備已經(jīng)被正確連接了。注意，你只應(yīng)當(dāng)連接僅僅一個(gè)設(shè)備。因?yàn)槿绻氵B接了多個(gè)設(shè)備（包含模擬器在內(nèi)），你后續(xù)的一些操作可能會(huì)失敗。拔掉不需要的設(shè)備，或者關(guān)掉模擬器，確保adbdevices的輸出只有一個(gè)是連接狀態(tài)。現(xiàn)在我們可以運(yùn)行react-nativerun-android來在設(shè)備上安裝并啟動(dòng)我們的應(yīng)用了這句命令執(zhí)行后，實(shí)際上就是在本地起一個(gè)nodeserver，并且將你的androidproject編譯打包，再上傳到你的手機(jī)上。然后當(dāng)js文件有改動(dòng)或debug模式下手動(dòng)選擇reloadjs時(shí)候會(huì)自動(dòng)更新bundle文件，達(dá)到改動(dòng)js文件后即時(shí)顯示的調(diào)試效果。這“紅屏”又是什么鬼？別著急，是正常的，我們需要連接上開發(fā)服務(wù)器，下面的步驟會(huì)解決這個(gè)問題。搖晃手機(jī)，或者運(yùn)行adbshellinputkeyevent82，可以調(diào)出開發(fā)者菜單。點(diǎn)擊進(jìn)入DevSettings點(diǎn)擊Debugserverhostfordevice輸入你電腦的IP地址和端口號(hào)（譬如我的是192.168.3.15:8081）注意：如果你的設(shè)備是android5.0以上版本(API21+)，就不用折騰這步了而是：運(yùn)行adbreversetcp:8081tcp:8081（建立一個(gè)從設(shè)備向電腦轉(zhuǎn)發(fā)的端口，前提是設(shè)備和電腦通過USB相連）不需要配置，你就可以使用ReloadJS和其它的開發(fā)選項(xiàng)了Chrome開發(fā)者工具在Chrome上調(diào)試js代碼，需要在開發(fā)菜單中選擇DebugJS，這會(huì)打開一個(gè)新的debugger-uitab頁。在Chrome中，按下?+option+i或者選擇視圖(View)-開發(fā)者(Developer)-開發(fā)工具(DeveloperTools)來打開開發(fā)工具控制臺(tái)。打開有異常時(shí)暫停（PauseOnCaughtExceptions）選項(xiàng)，能夠獲得更好的開發(fā)體驗(yàn)。Chrome中并不能直接看到App的用戶界面，而只能提供console的輸出，以及在sources項(xiàng)中斷點(diǎn)調(diào)試js腳本。要查看APP日志？在終端下運(yùn)行adblogcat*:SReactNative:VReactNativeJS:V可以看到你的應(yīng)用的日志。實(shí)時(shí)刷新這個(gè)選項(xiàng)可以在你的js代碼變更了之后，自動(dòng)觸發(fā)所連設(shè)備或者模擬器自動(dòng)刷新。開啟方法：先打開開發(fā)菜單，選擇DevSettings，然后選擇AutoreloadonJSchange選項(xiàng)。到此才能完整的調(diào)試AndroidRN,繁瑣到累絕不愛。。等等，能否想法簡化一下過程？既然我們的RN項(xiàng)目里包含了完整的android工程，何不把a(bǔ)ndroid工程導(dǎo)入到androidstudio去運(yùn)行？不但可以同時(shí)查看js的日志和native的日志，而且開發(fā)android的同學(xué)最熟悉AS，利用AS的快捷鍵和各類插件提升調(diào)試效率。haveatry,答案是肯定的！執(zhí)行react-nativestart也可以起一個(gè)nodeserver，只是它不幫你安裝APP到device。以上就是我踩坑后整理的方法，按這套組合拳就可以愉快地調(diào)試了。水平有限，拋磚引玉，如果你有更好的方法！歡迎拍磚！此處插播一個(gè)廣告：拍磚請(qǐng)拍到我們的杏樹林開放空間（246078103），期待感興趣的同學(xué)加入。之后要解決的一些issue1，關(guān)于設(shè)備MinSdkVerisonRN只支持Android4.1.2（API16）以上設(shè)備，4.0根據(jù)網(wǎng)絡(luò)數(shù)據(jù)大概占比0.7比例，隨著大部分app已經(jīng)不支持4.0以下設(shè)備了，這塊倒還可以接受,目前我們的病歷夾是3.0(API-11),口袋是4.0(API-14)2，我們的androidRN現(xiàn)在只能通過DebugJS才能渲染出界面，而不能正常的用ReloadJS3，在界面跳轉(zhuǎn)時(shí)卡的令人發(fā)指

在android studio打開一個(gè)RN項(xiàng)目在gradle sync過程中出現(xiàn)了‘Failed to parse XML ……’的錯(cuò)誤怎么解決

出現(xiàn)以上問題是由于git服務(wù)器上的版本和本地的版本不一致，導(dǎo)致gradle在更新配置造成的，點(diǎn)擊更新gradle其他的更新都很順利，唯獨(dú)到:react-native-svg 時(shí)，一直更新不下來，開始以為時(shí)網(wǎng)絡(luò)問題，但是自己點(diǎn)擊相應(yīng)的下載地址，也是可以正常下載的，就說明需要下載的配置文件的地址沒問題，多次點(diǎn)擊更新gradle還是如此，最后仔細(xì)查看相應(yīng)的問題，一直卡在:react-native-svg 這個(gè)地方，最后自己反其道而行，打開webstorm直接打開項(xiàng)目文件，在項(xiàng)目中的terminal中直接輸入yarn add react-native-svg，直接在webstorm中安裝yarn add react-native-svg，之后再次打開androidstudio更新gradle最后完美解決。

由于也證明，如果再次遇到reactnative項(xiàng)目，需要androidstudio中打開遇到類似rn組件需要安裝的，要在webstorm中晚裝完成之后，在運(yùn)行。

區(qū)分頁面是rn還是android原生

android用的是java語言開發(fā)的，RN是用JS語言開發(fā)的。你可以看一下app的特殊效果，有web樣式獨(dú)有的就是RN，原生的效果和動(dòng)畫會(huì)給人更穩(wěn)定的感覺

android rn 是什么意思

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

private ReactInstanceManager mReactInstanceManager;

private ReactRootView mReactRootView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this

本文名稱：androidrn,AndroidR努比亞twrp
文章分享：http://chinadenli.net/article41/dsihjhd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、App開發(fā)、云服務(wù)器、服務(wù)器托管、面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)