react native與webview通信的示例代碼

更新時間：2017年09月25日 11:32:23 作者：__卓原

本篇文章主要介紹了react native與webview通信的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

WebView是ReactNative中的組件 , 它可以創(chuàng)建一個原生的WebView，可以用于訪問一個網(wǎng)頁.

有時候我們需要在RN與WebView之間進(jìn)行通信,或者進(jìn)行數(shù)據(jù)傳遞,或者發(fā)送消息通知.這時候就要用以下知識了.

一:WebView向RN端發(fā)送數(shù)據(jù):

首先,我們構(gòu)建一個webview:

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

可以看到其中有一個onMessage方法,

onMessage function

在webview內(nèi)部的網(wǎng)頁中調(diào)用window.postMessage方法時可以觸發(fā)此屬性對應(yīng)的函數(shù)，從而實現(xiàn)網(wǎng)頁和RN之間的數(shù)據(jù)交換。設(shè)置此屬性的同時會在webview中注入一個postMessage的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實現(xiàn)。

網(wǎng)頁端的window.postMessage只發(fā)送一個參數(shù)data，此參數(shù)封裝在RN端的event對象中，即event.nativeEvent.data。data只能是一個字符串。

由此可見,這個方法是用來接收從Webview(也就是html)中傳來數(shù)據(jù)的方法.

內(nèi)部實現(xiàn)是對接收到的數(shù)據(jù)進(jìn)行處理:

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

e.nativeEvent.data就是從webview內(nèi)部發(fā)送過來的數(shù)據(jù).

光做這個還不夠, 這只是Rn端的處理,我們還需要在html中寫一個發(fā)送數(shù)據(jù)的方法:

var data = 0;

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

window.postMessage就是向RN發(fā)送數(shù)據(jù).

二: RN向Webview發(fā)送數(shù)據(jù):

首先定義一個發(fā)送數(shù)據(jù)的方法:

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

這步很簡單 .
直接把想發(fā)送的數(shù)據(jù)作為參數(shù)寫在這個方法里就好.

然后, 在html中也要有相應(yīng)的接收數(shù)據(jù)的方法:

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

}

這就可以實現(xiàn)Rn與Webview之間的通信了.

之后放上源碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="text-align: center">
  <button id="button">發(fā)送數(shù)據(jù)到react native</button>
  <p style="text-align: center">收到react native發(fā)送的數(shù)據(jù): <span id="data"></span></p>
</div>
<script>
  var data = 0;

  function sendData(data) {
    if (window.originalPostMessage) {
      window.postMessage(data);
    } else {
      throw Error('postMessage接口還未注入');
    }
  }

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

web.js:

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

export default class Web extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      webViewData: ''
    }
    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={'webview'}
            source={require('./index.html')}
            style={{width: 375, height: 220}}
            onMessage={(e) => {
              this.handleMessage(e)
            }}

          />

        </View>
        <Text>來自webview的數(shù)據(jù) : {this.state.webViewData}</Text>
        <Text onPress={() => {
          this.sendMessage()
        }}>發(fā)送數(shù)據(jù)到WebView</Text>
      </View>
    )
  }
}

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

});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: