About communication between react native and webview-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

About communication between react native and webview

小云云

Feb 01, 2018 pm 01:17 PM

native react webview

WebView is a component in ReactNative. It can create a native WebView and can be used to access a web page. This article mainly introduces the sample code for communication between react native and webview. The editor thinks it is quite good, so I will share it with you now. , also as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Sometimes we need to communicate between RN and WebView, or transfer data, or send message notifications. At this time, we need to use the following knowledge.

1: WebView sends data to RN:

First, we build a webview:

<WebView
  ref={&#39;webview&#39;}
  source={require(&#39;./index.html&#39;)}
  style={{width: 375, height: 220}}
  onMessage={(e) => {
    this.handleMessage(e)
  }}
  
/>

Copy after login

You can see that there is an onMessage method,

onMessage function

The function corresponding to this attribute can be triggered when the window.postMessage method is called in the webpage inside the webview, thus Realize data exchange between web page and RN. When setting this property, a postMessage global function will be injected into the webview and override the implementation of the same name that may already exist.

Window.postMessage on the web page only sends one parameter data, which is encapsulated in the event object on the RN side, namely event.nativeEvent.data. data can only be a string.

It can be seen that this method is used to receive data from Webview (that is, html).

The internal implementation is to process the received data:

handleMessage(e) {
  this.setState({webViewData: e.nativeEvent.data});
}

Copy after login

e.nativeEvent.data is the data sent from inside the webview.

Just doing this is not enough, this is just For Rn side processing, we also need to write a method of sending data in html:

var data = 0;

function sendData(data) {
  if (window.originalPostMessage) {
    window.postMessage(data);
  } else {
    throw Error(&#39;postMessage接口还未注入&#39;);
  }
}
document.getElementById(&#39;button&#39;).onclick = function () {
  data += 100;
  sendData(data);
}

Copy after login

window.postMessage is to send data to RN.

Two: RN sends data to Webview:

First define a method to send data:

sendMessage() {
  this.refs.webview.postMessage(++this.data);
}

Copy after login

This step is very simple.

Just write the data you want to send as a parameter in this method.

Then, there must also be a corresponding method for receiving data in the html:

window.onload = function () {
  document.addEventListener(&#39;message&#39;, function (e) {
    document.getElementById(&#39;data&#39;).textContent = e.data;
  });

}

Copy after login

This enables communication between Rn and Webview.

Put the source code afterwards:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p style="text-align: center">
  <button id="button">发送数据到react native</button>
  <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</p>
<script>
  var data = 0;

  function sendData(data) {
    if (window.originalPostMessage) {
      window.postMessage(data);
    } else {
      throw Error(&#39;postMessage接口还未注入&#39;);
    }
  }

  window.onload = function () {
    document.addEventListener(&#39;message&#39;, function (e) {
      document.getElementById(&#39;data&#39;).textContent = e.data;
    });
    document.getElementById(&#39;button&#39;).onclick = function () {
      data += 100;
      sendData(data);
    }
  }
</script>
</body>
</html>

Copy after login

web.js:

/**
 * Created by 卓原 on 2017/8/17.
 * zhuoyuan93@gmail.com
 */
import React from &#39;react&#39;;
import {
  View,
  Text,
  StyleSheet,
  WebView
} from &#39;react-native&#39;;

export default class Web extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      webViewData: &#39;&#39;
    }
    this.data = 0;
  }

  sendMessage() {
    this.refs.webview.postMessage(++this.data);
  }

  handleMessage(e) {
    this.setState({webViewData: e.nativeEvent.data});
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{width: 375, height: 220}}>
          <WebView
            ref={&#39;webview&#39;}
            source={require(&#39;./index.html&#39;)}
            style={{width: 375, height: 220}}
            onMessage={(e) => {
              this.handleMessage(e)
            }}

          />

        </View>
        <Text>来自webview的数据 : {this.state.webViewData}</Text>
        <Text onPress={() => {
          this.sendMessage()
        }}>发送数据到WebView</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 22,
    backgroundColor: &#39;#F5FCFF&#39;,
  },

});

Copy after login

Related recommendations:

JS Interactively click on the picture in WKWebView and preview the example

Detailed explanation of WebView knowledge points

Detailed explanation of the method of loading HTML code using WebView

The above is the detailed content of About communication between react native and webview. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7704

Java Tutorial

1640

CakePHP Tutorial

1394

Laravel Tutorial

1288

PHP Tutorial

1231

Related knowledge

How to build a real-time chat app with React and WebSocket Sep 26, 2023 pm 07:46 PM

How to build a real-time chat application using React and WebSocket Introduction: With the rapid development of the Internet, real-time communication has attracted more and more attention. Live chat apps have become an integral part of modern social and work life. This article will introduce how to build a simple real-time chat application using React and WebSocket, and provide specific code examples. 1. Technical preparation Before starting to build a real-time chat application, we need to prepare the following technologies and tools: React: one for building

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end Sep 28, 2023 am 10:48 AM

React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled

How to build simple and easy-to-use web applications with React and Flask Sep 27, 2023 am 11:09 AM

How to use React and Flask to build simple and easy-to-use web applications Introduction: With the development of the Internet, the needs of web applications are becoming more and more diverse and complex. In order to meet user requirements for ease of use and performance, it is becoming increasingly important to use modern technology stacks to build network applications. React and Flask are two very popular frameworks for front-end and back-end development, and they work well together to build simple and easy-to-use web applications. This article will detail how to leverage React and Flask

How to build a reliable messaging app with React and RabbitMQ Sep 28, 2023 pm 08:24 PM

How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:

React Router User Guide: How to implement front-end routing control Sep 29, 2023 pm 05:45 PM

ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need

How to build a fast data analysis application using React and Google BigQuery Sep 26, 2023 pm 06:12 PM

How to use React and Google BigQuery to build fast data analysis applications Introduction: In today's era of information explosion, data analysis has become an indispensable link in various industries. Among them, building fast and efficient data analysis applications has become the goal pursued by many companies and individuals. This article will introduce how to use React and Google BigQuery to build a fast data analysis application, and provide detailed code examples. 1. Overview React is a tool for building

How to package and deploy front-end applications using React and Docker Sep 26, 2023 pm 03:14 PM

How to use React and Docker to package and deploy front-end applications. Packaging and deployment of front-end applications is a very important part of project development. With the rapid development of modern front-end frameworks, React has become the first choice for many front-end developers. As a containerization solution, Docker can greatly simplify the application deployment process. This article will introduce how to use React and Docker to package and deploy front-end applications, and provide specific code examples. 1. Preparation Before starting, we need to install

How to build real-time data processing applications using React and Apache Kafka Sep 27, 2023 pm 02:25 PM

How to use React and Apache Kafka to build real-time data processing applications Introduction: With the rise of big data and real-time data processing, building real-time data processing applications has become the pursuit of many developers. The combination of React, a popular front-end framework, and Apache Kafka, a high-performance distributed messaging system, can help us build real-time data processing applications. This article will introduce how to use React and Apache Kafka to build real-time data processing applications, and

See all articles