react-native-webview和h5通信用法及说明

更新时间：2026年03月15日 10:31:08 作者：rock.dai

本文详细介绍了React Native和WebView之间的通信方式,包括HTML向RN通信、RN向HTML通信以及使用postMessage进行消息通信,通过具体的函数和代码示例,展示了如何实现双向通信,并提供了一个在项目中实际应用的调用示例

环境说明

webview: react-native-webview
html:	原生js和vue前端均已经测试验证

Html向RN通信

html作为发送方，通过window.ReactNativeWebView.postMessage发送消息，RN端通过onMessage接收

html发送方：

	var msg = '向RN发送消息'
    window.ReactNativeWebView.postMessage(msg)

RN接收方：

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

RN向Html通信

injectedJavaScript

这是Webview的一个回调函数，在网页第一次加载完成后会立即被Html执行（之后reload都不会再执行），我们需要将这个属性设置为一串js代码段字符串。

在这里我们可以如同在html中一样调用页面的的函数。（很多博客将这个翻译成注入js，在此感觉很是不妥当）

// html中有个js代码
function onRNMessage(data){
	// 为了更好的查看效果，建议采用document.get
	console.log('html收到RN端的调用，并传递了数据，data = '+data)
}

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

injectJavaScript

RN客户端可以通过webview直接调用这个函数，参数是字符串，在我的理解来看，调用这个方法后，会在html端以js的方式执行参数的中内容。

// html中有个js代码
function onRNMessage(data){
	// 为了更好的查看效果，建议采用document.get
	console.log('html收到RN端的调用，并传递了数据，data = '+data)
}

// rn中webview执行方式
<WebView
	ref={(webview)=>this.webview=webview}
avaScript={'onRNMessage("RN load success!")'}
/> 
// 可以在RN客户端主动调用
let data = 'RN called injectJavaScript!'
this.webview.injectJavaScript(`onRNMessage(${data})`)

使用postMessage进行消息通信（强烈不推荐）

在部分博客上看到通过this.webview.postMessage发送消息，在html端通过document.addEventListener('message',function(data){})的方式进行数据消息通信，但是此方案有以下问题：

不是官方推荐方案，并且在webview的函数中是没有对postMessage进行声明（编译器会提示这个方法不存在）
android设备上可行，但ios平台下不起作用
html中的message接收还需要区分是来源（这是一个公共通道）

在项目中使用

调用效果

在真实项目中，我们一般期望调用RN客户端后，可以通过回调函数将结果返回，而不要用过一个代理函数来分发，因此接下来将阐述我在项目中是如何实现这个目标的，实现以下的调用形式：

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

H5 代码模块

在h5中将调用函数的回调进行缓存（将调用者的参数放到一个Map中，回调的时候通过id找到回调函数进行结果回调）,保存在rn-bridge.js文件中

// 回调函数的map，用于app回调结果后，将结果返回给调用者，数据格式：<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在加载网页时候，会第一时间通过WebVeiw的injectedJavaScript执行这个函数，此时将mIsRNApp设置为true
  onRNApp: function () {
    mIsRNApp = true;
  },
};

/**
 * 医网信app执行后的结果回调
 * @param result  回调结果（对象）
 */
function RNCallback (result) {
  var callbackFun = mCallbackFunctionMap.get(result.functionId);
  mCallbackFunctionMap.delete(result.functionId);
  // RN客户端会对请求进行判断，返回‘0'表示业务操作成功
  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客户端中会根据modelName来进行具体的业务操作
 */
requestRN(requestParams,modelName){
  var functionId = `${modelName}-${Date.now()}`
  requestParmas.functionId = functionId
  requestParmas.modelName = modelName
  // 将请求通过postMessage发送给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
	  {//...其他内容}
	  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
    }
    // 可以根据params.modelName来判断处理什么业务
    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进行函数回调的方式
 * params   H5调用时候的参数，包含了functionId和modelName
 * value	需要返回的value对象
 */
postMessageToWeb(params, value) {
  	let response = {
      model: params.model,
      functionId: params.functionId,
      value: value ? value : undefined,
      status: value?.status ? value?.status : '0',  //默认都返回0表示js-sdk调用成功，当value中有status时，则使用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调用示例

需要运行在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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

深入浅析react native es6语法
这篇文章主要介绍了深入浅析react native es6语法的相关资料,需要的朋友可以参考下
2015-12-12
React项目如何使用Element的方法步骤
本文主要介绍了React项目如何使用Element的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
ReactNative项目OpenHarmony三方库集成实战指南:react-native-calendar-even
文章介绍了react-native-calendar-events库,这是一个强大的日历事件库,支持读写系统日历,实现日程管理功能,文章说明了其安装配置、核心功能、API使用方法,并提供了注意事项和完整示例,适用于React Native开发中的日历事件管理,感兴趣的朋友一起看看吧
2026-04-04
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
在React 组件中使用Echarts的示例代码
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
基于React.js实现兔兔牌九宫格翻牌抽奖组件
这篇文章主要为大家详细介绍了如何基于React.js实现兔兔牌九宫格翻牌抽奖组件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-01-01
react实现移动端下拉菜单的示例代码
这篇文章主要介绍了react实现移动端下拉菜单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
详解如何使用React构建跑马灯组件
当你想到跑马灯时,往往会想到游乐园里那些充满活力的灯光和旋转的显示,带回童年的美好回忆,本文将和大家一起探索如何在 React 中构建一个引人入胜的跑马灯组件,需要的朋友可以参考下
2024-04-04
React Router 如何使用history跳转的实现
这篇文章主要介绍了React Router 如何使用history跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
ReactJs快速入门教程(精华版)
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.这篇文章主要介绍了ReactJs快速入门教程(精华版)的相关资料,需要的朋友可以参考下
2016-11-11