rn webview ajax请求,react-native WebVIew消息传递

onMessage

在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数，从而实现网页和 RN 之间的数据交换。 设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。

网页端的 window.postMessage 只发送一个参数 data，此参数封装在 RN 端的 event 对象中，即 event.nativeEvent.data。data 只能是一个字符串。

类型 必填

function 否

我们直接调用postMessage会发现h5中消息不能传递给RN，这是由于版本升级，导致老的api调用的时候会出现一些问题，在github上的issue里有的说在setTimeout的回调函数中使用postMessage方法可以传递消息，但是自己亲测这样做没有作用，然后在新文档的issue中找到下面这样的一个回复，成功解决了问题

image.png

安卓端webview使用本地文件路径如下：

在。。。AwesomeProject\android\app\src\main目录下新建一个assets目录，里面存放h5代码，source中的引用路径为：file:///android_asset/h5/index.html

在ios平台上，引用本地的h5可以在项目src文件夹下建相关目录，使用require('相对路径')的方式引入

简单示例代码如下：

h5：

.btn{

background: #f00;color:#fff

}

发送数据到react native

收到react native发送的数据:

var data = 0;

function send () {

data += 100;

window.ReactNativeWebView.postMessage("Hello React");

}

window.onload = function () {

document.addEventListener('message', function (e) {

document.getElementById('data').textContent = e.data;

});

}

RN:

import React from 'react'

import {View, Button, Text, AsyncStorage} from 'react-native'

import {WebView} from 'react-native-webview'

import {decrement, increment} from "../../store/action";

import { SwitchActions } from "react-navigation";

class HomeScreen extends React.Component {

constructor(props) {

super(props)

this.state = {

webViewData: 0

}

this.data = 0

}

sendMessage() {

this.refs.webview.postMessage(++this.data);

}

handleMessage(e) {

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

}

render() {

return (

ref={'webview'}

source={{uri: 'file:///android_asset/h5/index.html'}}

style={{width:375, height:120, backgroundColor: '#eee'}}

onMessage={(event) => {

// alert(e.nativeEvent.data)

console.log(event.nativeEvent)

this.handleMessage(event)

}}/>

来自webview的数据 : {this.state.webViewData}

{

this.sendMessage()

}}>发送数据到WebView

)

}

}

export default HomeScreen