react native与webview通信的示例代码

WebView是ReactNative中的组件,它可以创建一个原生的WebView，可以用于访问一个网页.

有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了.

一:WebView向RN端发送数据:

首先,我们构建一个webview:

{ this.handleMessage(e) }}

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

onMessage function

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

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

由此可见,这个方法是用来接收从Webview(也就是html)中传来数据的方法.

内部实现是对接收到的数据进行处理:

e.nativeEvent.data就是从webview内部发送过来的数据.

光做这个还不够,这只是Rn端的处理,我们还需要在html中写一个发送数据的方法:

window.postMessage就是向RN发送数据.

二: RN向Webview发送数据:

首先定义一个发送数据的方法:

这步很简单 . 直接把想发送的数据作为参数写在这个方法里就好.

然后,在html中也要有相应的接收数据的方法:

}

这就可以实现Rn与Webview之间的通信了.

之后放上源码:

web.js:

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 (

{ 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: '#F5FCFF',},});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

react native与webview通信的示例代码

一:WebView向RN端发送数据:

二: RN向Webview发送数据:

猜你在找的JavaScript相关文章