RN Webview与Web的通信与调试

最新推荐文章于 2025-05-14 02:23:21 发布

weixin_34124939

最新推荐文章于 2025-05-14 02:23:21 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： json 移动开发

原文链接：https://juejin.im/post/5a3a53ea5188257d724295d3

本文介绍了React Native中WebView组件的使用方法，包括加载线上和本地HTML页面、实现RN与HTML之间的消息传递，以及如何进行调试。

原文链接：mrzhang123.github.io/2017/12/20/…

React Native Version:0.51

RN 在 0.37 版本中加入了WebView功能，所以想要在使用WebView,版本必须>=0.37，发送的 message 只能是字符串，所以需要将其他格式的数据转换成字符串，在接收到后再转换回去，其实直接用JSON.stringify和JSON.parse就可以

加载 html

source属性用于指定加载的 html，可以加载在线的页面，也可以加载本地的页面，代码如下：

// 加载线上页面
<Webview
	source={{uri: 'http://www.mi.com'}}
/>
// 加载本地html文件
<WebView
	source={require('../src/html/index.html')}
/>
// 或者
<WebView
	source={{uri: 'file:///android_asset/baiduMap/index.html'}}
	onMessage={e => this.handleMessage(e)}
	automaticallyAdjustContentInsets={false}
	startInLoadingState
/>
复制代码

注意 ⚠️

加载本地html的方式虽然可以使用require也可以使用uri: 'file:///android_asset/baiduMap/index.html'的形式，但是在实际开发中发现，使用require在打成包之后无法加载到。所以将html放在assets文件夹下，使用file路径加载：

将html文件放在android/app/src/main/assets
加载html，即source={{uri: 'file:///android_asset/baiduMap/index.html'}}

WebView 与 html 的通信

webview 发送信息到 html

WebView 给 html 发送信息需要使用postMessage，而 html 接收 RN 发过来的信息需要监听message事件，代码如下：

// RN
class WebViewExample extends Component {
  onLoadEnd = () => {
    this.refs.webview.postMessage = 'this is RN msg'
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('../html/index.html')}
        onLoadEnd={this.onLoadEnd}
      />
    )
  }
}
export default WebViewExample
// web
window.document.addEventListener('message', function(e) {
  const message = e.data
})
复制代码

这里需要注意一点

postMessage需要在 webview 加载完成之后再去 post，如果放在commponentWillMount里由于页面没有加载完成就 post 信息，会导致 html 端无法监听到 message 事件。

html 发送信息到 webview

// RN
class WebViewExample extends Component {
  handleMessage = e => {
    const message = e.nativeEvent.data
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('../html/index.html')}
        onMessage={e => this.handleMessage(e)}
      />
    )
  }
}
export default WebViewExample

// web
window.postMessage('this is html msg')
复制代码