WebView组件与HTML页面通信机制（React-Native）

最新推荐文章于 2024-01-19 11:47:44 发布

举世武双

最新推荐文章于 2024-01-19 11:47:44 发布

阅读量1.3k

点赞数

分类专栏： React-Native 我的React Native进阶之路文章标签： React-Native WebView WebView与HTML通信

本文链接：https://blog.csdn.net/qq_33721382/article/details/89016568

版权

本文详细介绍了在React-Native应用中，如何使用WebView组件与HTML页面进行通信，包括React-Native调用HTML页面事件和HTML页面调用React-Native事件，并提供了具体的代码示例和遇到的问题解决方案。

摘要由CSDN通过智能技术生成

2019-04-03

使用WebView组件可以显示一个HTML网页，这里记录一下react-native如何跟HTML页面进行通信，即实现双向的事件调用和数据传递。

一、React-Native调用HTML页面事件

1、在HTML页面添加对RN事件的监听，。

window.onload = function(){
        addReactNativeListener();
    };
    
    /**
    * document.addEventListener("message",function(event) {}
    * 监听RN发送的事件，通过event.data获取传递过来的参数值
    */
    function addReactNativeListener() {
        document.addEventListener("message",function(event) {
            document.getElementById("showInfoElement").innerHTML = "RN发送事件到HTML页面，传递过来的参数：" + event.data;
        });
    }

2、RN端发送事件，我们通过一个按钮事件来执行这个操作。

<Button title={'RN发送事件到HTML页面'} onPress={() => {
                    this.refs.webView.postMessage("RN发送事件到HTML页面");
                }}/>

postMessage()只能传递一个字符串参数，通常会使用JSON字符串，携带操作标识和相关参数，以完成多种业务操作。这里是简单的传递了一个字符串。

3、IOS端效果

二、HTML页面调用React-Native事件

1、编写一段HTML代码，WebView加载显示本地的HTML。

const HTML = `  
<!DOCTYPE html> 
<html lang="en">  
  <head>  
    <title>WebView组件与HTML页面通信机制实践</title>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>  
  <body>  
    <div>
        <button onclick="sendEventToReactNative()" >发送事件到React-Native端</button>
    </div>
    <p>React-Native WebView组件与HTML页面通信机制实践</p>
    <div id="showInfoElement"></div>
  </body>  
  
  <script>
  
    window.onload = function(){
        addReactNativeListener();
    };
    
    /**
    * document.addEventListener("message",function(event) {}
    * 监听RN发送的事件，通过event.data获取传递过来的参数值
    */
    function addReactNativeListener() {
        document.addEventListener("message",function(event) {
            document.getElementById("showInfoElement").innerHTML = "RN发送事件到HTML页面，传递

最低0.47元/天解锁文章

举世武双

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WebView组件与HTML页面通信机制（React-Native）

2019-04-03使用WebView组件可以显示一个HTML网页，这里记录一下react-native如何跟HTML页面进行通信，即实现双向的事件调用和数据传递。一、React-Native调用HTML页面事件1、在HTML页面添加对RN事件的监听，。window.onload = function(){ addReactNativeListener();...
复制链接

扫一扫

专栏目录