React Native之网页组件WebView的使用与通信

在实际开发中，我们通常会嵌入一些html页面，官方为我们提供了一个非常好用的网页组件WebView，通过这个组件我们可以通过传入一个url或者是传入一段html

一. WebView的基本属性方法介绍与使用

主要属性介绍

source：在 WebView 中载入一段静态的 html 代码或是传入一个 url（还可以附带一些 header 选项）
automaticallyAdjustContentInsets：设置是否自动调整内容。格式：bool。默认值为true
contentInset：设置内容所占的尺寸大小。格式：{top:number,left:number,bottom:number,right:number}
injectedJavaScript(String)：当网页加载之前注入一段 js 代码。其值是字符串形式。
startInLoadingState：是否开启页面加载的状态，其值为 true 或者 false。
bounces（仅iOS）：回弹特性。默认为 true。如果设置为 false，则内容拉到底部或者头部都不回弹。
scalesPageToFit（仅iOS）：用于设置网页是否缩放自适应到整个屏幕视图，以及用户是否可以改变缩放页面。
scrollEnabled（仅iOS）：用于设置是否开启页面滚动。
domStorageEnabled（仅Android）：用于控制是否开启 DOM Storage（存储）。
javaScriptEnabled（仅Android）：是否开启 JavaScript，在 iOS 中的 WebView 是默认开启的。

主要方法介绍

onNavigationStateChange：当导航状态发生变化的时候调用。
onLoadStart：当网页开始加载的时候调用。
onError：当网页加载失败的时候调用。
onLoad：当网页加载结束的时候调用。
onLoadEnd：当网页加载结束调用，不管是成功还是失败。
renderLoading：WebView组件正在渲染页面时触发的函数，只有 startInLoadingState 为 true 时该函数才起作用。
renderError：监听渲染页面出错的函数。
onShouldStartLoadWithRequest（仅iOS）：该方法允许拦截 WebView 加载的 URL 地址，进行自定义处理。该方法通过返回 true 或者 falase 来决定是否继续加载该拦截到请求。
onMessage：在webView内部网页中，调用window.postMessage可以触发此属性对应的函数，通过event.nativeEvent.data获取接收到的数据，实现网页和RN之间的数据传递
injectJavaScript（function）：函数接受一个字符串，该字符串将传递给WebView，并立即执行为JavaScript。

通过url加载一个页面

        render() {

		return (

			<View style={styles.container}>

				<WebView

					ref={webView => this.webView = webView}

					startInLoadingState={true}

					onNavigationStateChange={e => this.onNavigationStateChange(e)}

					source={{ uri: 'https://github.com/xxxxxxx'}}

				/>

			</View>

		);

	}

通过html加载一个页面

        render() {

		return (

			<View style={styles.container}>

				<WebView

					ref={webView => this.webView = webView}

					startInLoadingState={true}

					onNavigationStateChange={e => this.onNavigationStateChange(e)}

					source={{ html: '<h1'>Demo</h1>'}}

				/>

			</View>

		);

	}

二. RN WebView和H5之间的通信

1.RN WebView向H5页面注入JS

思路：通过jnjectedJavaScript的方式注入JS，在H5页面加载之后立即执行。（可以理解为是在WebView中去主动触发H5的方法，从而实现通信）

需要注意的是，injectedJavaScript注入的必须是JS，注入的内容可以是方法的实现也可以是方法名。其实注入函数名的时候，实际上注入的仍然是函数的实现。当注入js方法名需要传递参数的时候，可以提前将函数名作为字符串，函数参数作为变量，通过生成一个字符串然后再讲字符串注入。

render() {

        let text = 'back';

        let call = `call('${text}')`;

        return (

            <View

                style={{flex: 1, backgroundColor: 'white', marginBottom: SAFE_AREA_BOTTOM_HEIGHT}}>

                <WebView style={{flex: 1}}

                         ref='webView'

                         injectedJavaScript={`${text1}`}

                         source={{

                             html: '<body>\n' +

                             '<button onClick="call()" style="margin-top: 100px;" id="call">call</button>\n' +

                             '<script>\n' +

                             '    function call(text) {\n' +

                             '        var btn=  document.getElementById(\'call\')\n' +

                             '        btn.innerHTML="text";\n' +

                             '    }\n' +

                             '\n' +

                             '</script>\n' +

                             '</body>'

                >

                </WebView>

            </View>

        );

    }

上述代码当通过WebView向RN页面注入一个html代码的时候，通过injectedJavaScript向H5通信，然后更改button的名字。

2.WebView和H5相互发送监听消息

该方式可以双向发送消息

2.1 RN端向H5发送消息

WebView绑定ref，通过html5新增的postMessage发送消息

onLoadEnd={() => {

     this.refs.webView.postMessage('RN向H5发送的消息');

 }}

在H5中注册监听

window.onload = function() {

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

       console.log(msg)

       message = msg.data;

   });

 }

2.2 H5向RN发送消息

在RN端通过onMessage接收消息

onMessage={(event) => {console.log(event.nativeEvent.data);}}

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

H5发送消息，此时只能传递string类型

window.postMessage('网页向rn发送的消息');

React Native之网页组件WebView的使用与通信的更多相关文章

react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
React Native之常用组件（View）
一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
React Native常用第三方组件汇总--史上最全之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
React Native常用第三方组件汇总--史上最全[转]
本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...
React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
React Native 系列(五) -- 组件间传值
前言本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

随机推荐

Maven项目中通过profile定义使不同环境使用不同配置信息
profile可以让我们定义一系列的配置信息,然后指定其激活条件.这样我们就可以定义多个profile,然后每个profile对应不同的激活条件和配置信息,从而达到不同环境使用不同配置信息的效果.比如 ...
JDK各版本新特性总结
序言北风潜入悄无声,未品浓秋已立冬. JDK1.1--1996 JDK1.2--1998 JDK1.3--2000 JDK1.4--2002 JDK5.0--2004 JDK6.0--2006 JD ...
有用的JavaScript开发小建议
这篇文章将向你分享一些不为人知的但很有用的JavaScript小建议,对那些刚涉及使用JavaScript编程语言的初级开发者应该有很大的帮助. 1. 用数组长度截取数组我们都知道,对象都是通过使用 ...
eclipse配置hadoop插件
1. 版本信息 eclipse windows 64 bit hadoop 2.5.2 64 bit hadoop eclipse-plug 2.5.2 2. 下载hadoop-2.5.2.t ...
[转]大整数算法[11] Karatsuba乘法
★ 引子前面两篇介绍了 Comba 乘法,最后提到当输入的规模很大时,所需的计算时间会急剧增长,因为 Comba 乘法的时间复杂度仍然是 O(n^2).想要打破乘法中 O(n^2) ...
JavaScript中函数参数的值传递和引用传递
结论: 对于数字.字符串等基本类型变量,是将它们的值传递给了函数参数,函数参数的改变不会影响函数外部的变量. 对于数组和对象等是将对象(数组)的变量的值传递给了函数参数,这个变量保存的指向对象(数组) ...
python pachong zhuanzai
come from:http://www.cnblogs.com/dyllove98/archive/2013/07/12/3187186.html 先来说一下我们学校的网站: http://jwxt ...
基于NIO的同步非阻塞编程完整案例,客户端发送请求,服务端获取数据并返回给客户端数据,客户端获取返回数据
这块还是挺复杂的,挺难理解,但是多练几遍,多看看研究研究其实也就那样,就是一个Selector轮询的过程,这里想要双向通信,客户端和服务端都需要一个Selector,并一直轮询, 直接贴代码: Ser ...
利用rundll32执行程序的函数执行程序
1.前言无意间发现hexacorn这个国外大佬,给出了很多通过rundll32执行DLL中的函数执行程序的方法,思路很灵巧. 2.原理 rundll32加载dll 用法: rundll32 < ...
NTC热敏电阻认识及功率型热敏电阻选型
-------------------记公司一款已经量产的产品,在最新加工的批次上出现:刚上电就炸毁功率型热敏电阻的问题------------------------- ************写在 ...