React Native与WebView双向通信实例与代码详解

在React Native开发中，WebView是一个重要的组件，它允许我们在应用程序中嵌入和显示网页内容。本文将详细介绍如何在React Native应用中实现React Native (RN) 和 WebView 之间的通信，以便于数据交互和消息传递。 首先，要在RN中创建一个WebView，需要在组件中添加`onMessage`属性，这是一个回调函数，当WebView接收到来自网页的消息时会被触发。例如： ```jsx <WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e); }} /> ``` `handleMessage`函数负责处理接收到的数据，这里通过`e.nativeEvent.data`获取到网页传递过来的数据，并将其更新到组件的状态中： ```jsx handleMessage(e) { this.setState({ webViewData: e.nativeEvent.data }); } ``` 然而，为了在HTML页面上能够向RN发送数据，需要在网页端定义一个`sendData`函数，它会调用`window.postMessage`方法。如果`postMessage`接口已经被原生实现，就使用它来发送数据；否则抛出错误： ```javascript var data = 0; function sendData(data) { if (window.originalPostMessage) { window.postMessage(data); } else { throw Error('postMessage接口还未注入'); } } ``` 在HTML中，当你需要发送数据给RN时，比如一个计数器的值，你可以这样调用`sendData`： ```html <button onclick="sendData(data)">Send Data</button> ``` 需要注意的是，`window.postMessage`的发送数据部分只能是字符串，因此在实际应用中，可能需要在前端将非字符串数据转换为字符串形式。接收端（RN）则需要处理如何解析和处理这些字符串数据。 React Native与WebView通信的关键在于设置`onMessage`监听器，处理接收到的数据，以及在HTML中正确调用`postMessage`发送数据。通过这种方式，RN应用可以与嵌入的WebView进行双向数据流交互，实现更丰富的功能集成。