react-native-webview和h5通信用法及說(shuō)明

更新時(shí)間：2026年03月15日 10:31:08 作者：rock.dai

本文詳細(xì)介紹了React?Native和WebView之間的通信方式,包括HTML向RN通信、RN向HTML通信以及使用postMessage進(jìn)行消息通信,通過(guò)具體的函數(shù)和代碼示例,展示了如何實(shí)現(xiàn)雙向通信,并提供了一個(gè)在項(xiàng)目中實(shí)際應(yīng)用的調(diào)用示例

環(huán)境說(shuō)明

webview: react-native-webview
html:	原生js和vue前端均已經(jīng)測(cè)試驗(yàn)證

Html向RN通信

html作為發(fā)送方，通過(guò)window.ReactNativeWebView.postMessage發(fā)送消息，RN端通過(guò)onMessage接收

html發(fā)送方：

	var msg = '向RN發(fā)送消息'
    window.ReactNativeWebView.postMessage(msg)

RN接收方：

	<WebView
		...其他屬性
		onMessage={(event)=>{
			console.log('RN端接收到消息，消息內(nèi)容='+event.nativeEvent.data)
		}
	/>

RN向Html通信

injectedJavaScript

這是Webview的一個(gè)回調(diào)函數(shù)，在網(wǎng)頁(yè)第一次加載完成后會(huì)立即被Html執(zhí)行（之后reload都不會(huì)再執(zhí)行），我們需要將這個(gè)屬性設(shè)置為一串js代碼段字符串。

在這里我們可以如同在html中一樣調(diào)用頁(yè)面的的函數(shù)。（很多博客將這個(gè)翻譯成注入js，在此感覺(jué)很是不妥當(dāng)）

// html中有個(gè)js代碼
function onRNMessage(data){
	// 為了更好的查看效果，建議采用document.get
	console.log('html收到RN端的調(diào)用，并傳遞了數(shù)據(jù)，data = '+data)
}

// rn中webview執(zhí)行方式
<WebView
	...其他屬性
	injectedJavaScript={'onRNMessage("RN load success!")'}
/>

injectJavaScript

RN客戶端可以通過(guò)webview直接調(diào)用這個(gè)函數(shù)，參數(shù)是字符串，在我的理解來(lái)看，調(diào)用這個(gè)方法后，會(huì)在html端以js的方式執(zhí)行參數(shù)的中內(nèi)容。

// html中有個(gè)js代碼
function onRNMessage(data){
	// 為了更好的查看效果，建議采用document.get
	console.log('html收到RN端的調(diào)用，并傳遞了數(shù)據(jù)，data = '+data)
}

// rn中webview執(zhí)行方式
<WebView
	ref={(webview)=>this.webview=webview}
avaScript={'onRNMessage("RN load success!")'}
/> 
// 可以在RN客戶端主動(dòng)調(diào)用
let data = 'RN called injectJavaScript!'
this.webview.injectJavaScript(`onRNMessage(${data})`)

使用postMessage進(jìn)行消息通信（強(qiáng)烈不推薦）

在部分博客上看到通過(guò)this.webview.postMessage發(fā)送消息，在html端通過(guò)document.addEventListener('message',function(data){})的方式進(jìn)行數(shù)據(jù)消息通信，但是此方案有以下問(wèn)題：

不是官方推薦方案，并且在webview的函數(shù)中是沒(méi)有對(duì)postMessage進(jìn)行聲明（編譯器會(huì)提示這個(gè)方法不存在）
android設(shè)備上可行，但ios平臺(tái)下不起作用
html中的message接收還需要區(qū)分是來(lái)源（這是一個(gè)公共通道）

在項(xiàng)目中使用

調(diào)用效果

在真實(shí)項(xiàng)目中，我們一般期望調(diào)用RN客戶端后，可以通過(guò)回調(diào)函數(shù)將結(jié)果返回，而不要用過(guò)一個(gè)代理函數(shù)來(lái)分發(fā)，因此接下來(lái)將闡述我在項(xiàng)目中是如何實(shí)現(xiàn)這個(gè)目標(biāo)的，實(shí)現(xiàn)以下的調(diào)用形式：

// 在es6中可以使用箭頭函數(shù)
userInfo({
	success:function(result){
		console.log('success',result)
	},
	fail:function(reason){
		console.warn('fail',reason)
	}
})

H5 代碼模塊

在h5中將調(diào)用函數(shù)的回調(diào)進(jìn)行緩存（將調(diào)用者的參數(shù)放到一個(gè)Map中，回調(diào)的時(shí)候通過(guò)id找到回調(diào)函數(shù)進(jìn)行結(jié)果回調(diào)）,保存在rn-bridge.js文件中

// 回調(diào)函數(shù)的map，用于app回調(diào)結(jié)果后，將結(jié)果返回給調(diào)用者，數(shù)據(jù)格式：<string, object>，
  // 其中object：{model:string,functionId:string,success:function,compile:function,fail:function}
var mCallbackFunctionMap = new Map();

window.RN_WebViewBridge = {
  onMessage: function (data) {
    RNCallback(data);
  },
  // app在加載網(wǎng)頁(yè)時(shí)候，會(huì)第一時(shí)間通過(guò)WebVeiw的injectedJavaScript執(zhí)行這個(gè)函數(shù)，此時(shí)將mIsRNApp設(shè)置為true
  onRNApp: function () {
    mIsRNApp = true;
  },
};

/**
 * 醫(yī)網(wǎng)信app執(zhí)行后的結(jié)果回調(diào)
 * @param result  回調(diào)結(jié)果（對(duì)象）
 */
function RNCallback (result) {
  var callbackFun = mCallbackFunctionMap.get(result.functionId);
  mCallbackFunctionMap.delete(result.functionId);
  // RN客戶端會(huì)對(duì)請(qǐng)求進(jìn)行判斷，返回‘0'表示業(yè)務(wù)操作成功
  if (result.status === '0') {
    callbackFun.success && callbackFun.success(result.value);
  } else {
    callbackFun.fail && callbackFun.fail(result.value);
  }
  callbackFun.compile && callbackFun.compile(result.value);
};

/**
 *
 * modelName  在RN客戶端中會(huì)根據(jù)modelName來(lái)進(jìn)行具體的業(yè)務(wù)操作
 */
requestRN(requestParams,modelName){
  var functionId = `${modelName}-${Date.now()}`
  requestParmas.functionId = functionId
  requestParmas.modelName = modelName
  // 將請(qǐng)求通過(guò)postMessage發(fā)送給RN客戶端
  window.ReactNativeWebView.postMessage(JSON.stringify(requestParmas));
}

/**
 *	模仿獲取用戶信息
 *	params:{
 *	success:function(res){},
 *	fail:function(res){},
 *	compile:function(res){}
 *	}
 */
userInfo(params){
	requestRN(params,'userInfo')
}

RN客戶端處理代碼

render(){
	return (
	<WebView
	  {//...其他內(nèi)容}
	  ref={(webView)=>this.webView = webView}
      onMessage={this.onMessage}
      javaScriptEnabled={true}
	/>
	)
}

onMessage = (event: WebViewMessageEvent) => {
    console.log('onMessage ',event)
    let data = event.nativeEvent.data
    let params=null
	try {
      params = JSON.parse(data)
    } catch (e) {
      console.warn('json parse error!! data = ' + data)
    }
    if (!params) {
      return
    }
    // 可以根據(jù)params.modelName來(lái)判斷處理什么業(yè)務(wù)
    this.disposeWebMessage(params)
  }
	
disposeWebMessage(params){
	switch(params.modelName){
		case 'userInfo':
			this.userInfo(params)
			break
		default:
			break
	}
	
}

userInfo(params){
	let value={
		userName:'daizhenhong'
	}
	this.postMessageToWeb(value)
	
}

/**
 * 封裝了webview進(jìn)行函數(shù)回調(diào)的方式
 * params   H5調(diào)用時(shí)候的參數(shù)，包含了functionId和modelName
 * value	需要返回的value對(duì)象
 */
postMessageToWeb(params, value) {
  	let response = {
      model: params.model,
      functionId: params.functionId,
      value: value ? value : undefined,
      status: value?.status ? value?.status : '0',  //默認(rèn)都返回0表示js-sdk調(diào)用成功，當(dāng)value中有status時(shí)，則使用value中的status
      message: `${params.model}:ok`,
    }
    let responseStr = JSON.stringify(response)
    const jsString = `(function() {window.RN_WebViewBridge && window.RN_WebViewBridge.onMessage(${responseStr});})()` 
    this.webView?.injectJavaScript(jsString)
  }

H5調(diào)用示例

需要運(yùn)行在RN客戶端中，并且html需要依賴上面提到的rn-bridge.js文件

<html>
<body>
  	<div onclick="onClickGetUserInfo()">獲取用戶信息</div>
</body>
<script language="JavaScript" src="./rn-bridge.js"></script>
<script language="JavaScript">
function onClickGetUserInfo () {
    userInfo({
      success: function (value) {
        console.log('onClickGetUserInfo value = ' + JSON.stringify(value));
      },
      compile: function (result) {
        console.warn('onClickGetUserInfo value = ' + JSON.stringify(result));
      },
    });
  }
</script>
</html>