React Native与WebView双向通信示例及数据交换

在React Native开发中，WebView是一个强大的组件，允许我们嵌入网页内容并实现在React Native应用（RN）与WebView之间的通信。本文将详细介绍如何在React Native应用中利用WebView进行数据传递和消息通知。 首先，我们要创建一个支持通信的WebView。通过`<WebView>`组件，设置`ref`属性以便后续操作，并使用`onMessage`属性来监听来自WebView的消息。这个属性的回调函数`handleMessage`会在接收到`window.postMessage`事件时被触发，这是Web端与RN交互的关键接口。例如： ```jsx <WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e); }} /> ``` 当在WebView中的JavaScript代码执行`window.postMessage(data, '*')`时，`handleMessage`函数会被调用，`e.nativeEvent.data`将包含传来的数据。由于`data`只能是一个字符串，因此在处理接收到的数据时，通常会解析并适配其类型。 在HTML端，我们需要定义一个发送数据的函数，如`sendData`，并在用户触发某个事件（如点击按钮）时调用它。这里使用了条件判断，确保在`window.postMessage`已经被注入到WebView环境之前不会抛出错误： ```javascript var data = 0; function sendData(data) { if (window.originalPostMessage) { window.postMessage(data); } else { throw new Error('postMessage接口还未注入'); } } document.getElementById('button').onclick = function() { data += 100; sendData(data); } ``` 这样，当你在React Native应用中处理`handleMessage`函数时，就能获取到从WebView发送的数据，并根据需求进一步处理。例如，你可以更新状态或执行其他业务逻辑。 总结来说，React Native与WebView的通信主要通过`window.postMessage`方法实现双向数据流。在React Native端，我们需要设置`onMessage`监听器处理接收到的数据；而在Web端，则需要在适当的时机调用`postMessage`来发送数据。通过这样的机制，可以方便地在React Native应用和嵌入的网页之间进行数据共享和交互。