首页 > 代码库 > WebView JS与RN进行通讯
WebView JS与RN进行通讯
RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间最终却是另一作者提交了该功能的官方版本。言归正转,由于Web的需求丰富多样所以如果不能实现WebView里的JS与RN的通讯的话,就显得特别不方便,下面代码示例如何获取当前的WebView Title,(实时Title,第一次加载的标题RN有Nativestate的方式获取,但如果Title被动态变更的话通过该办法就获取不了)。
import React, { Component } from ‘react‘;import { AppRegistry, StyleSheet, Text, View, WebView, Button,} from ‘react-native‘;export default class RN37 extends Component { webview = null; //执行JS代码,会被转为字符串,使用injectedJavaScript方法用eval执行字符串方法 postMessage = () => { if (this.webview) { this.webview.postMessage(‘window.postMessage("Title:"+document.title);‘); } } //接收WebView JS事件消息 onMessage = e => { alert(e.nativeEvent.data); } render() { return ( <View style={styles.container}> <Button enabled onPress={this.postMessage} title="Send Message to Web View" /> <WebView ref={webview => { this.webview = webview; } } style={{ flex: 1, width:360, }} injectedJavaScript="document.addEventListener(‘message‘, function(e) {eval(e.data);});" source={{uri:"https://www.baidu.com"}} onMessage={this.onMessage} /> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#F5FCFF‘, }});AppRegistry.registerComponent(‘RN37‘, () => RN37);
执行效果
WebView JS与RN进行通讯
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。