在实际开发中,我们通常会嵌入一些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的使用与通信的更多相关文章

  1. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  2. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  3. React Native之常用组件(View)

    一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...

  4. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

  5. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  6. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  7. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  8. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  9. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

随机推荐

  1. 视差插件parallarx

    github上的demo,自己拿来改了改. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  2. 浏览器内核控制meta name="renderer" 说明文档

    https://blog.csdn.net/adc_god/article/details/51531263

  3. Xilinx Altera FPGA中的逻辑资源(Slices VS LE)比较

    前言 经常有朋友会问我,“我这个方案是用A家的FPGA还是X家的FPGA呢?他们的容量够不够呢?他们的容量怎么比较呢?”当然,在大部分时候,我在给客户做设计的时候,直接会用到最高容量的产品,因为我们的 ...

  4. BZOJ3994 约数个数和

    3994: [SDOI2015]约数个数和 Time Limit: 20 Sec  Memory Limit: 128 MB Description  设d(x)为x的约数个数,给定N.M,求   I ...

  5. 20155202 2016-2017-2 《Java程序设计》第7周学习总结

    20155202 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 世界协调时间:UTC 采用 闰秒修正 Epoch为某特定时代开始,时间轴上某一瞬间 Unix ...

  6. Scrapy爬虫框架之爬取校花网图片

    Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设 ...

  7. 4 - django-orm基本使用

    目录 1 数据库与ORM 2 orm的配置 2.1 引擎和配置 2.2 mysql驱动程序 3 orm 表模型 3.1 创建表对象 3.2 Django字段类型 3.3 常用字段参数说明 3.4 特殊 ...

  8. JQuery怎么实现页面左侧菜单刷新后保留鼠标点击addclass的样式?

    $('ul.main-menu li a').each(function(){ if($($(this))[0].href==String(window.location)) $(this).pare ...

  9. Centos之文件搜索命令locate

    locate命令 locate 文件名 在后台数据库中按文件名搜索,搜索速度更快 /var/lib/mlocate #locate命令所搜索的后台数据库 updatedb 更新数据库 locate搜索 ...

  10. Extjs 代码拾穗

    1.tree grid 添加一行 var rootNode = store.getRootNode(); var newRecord = Ext.create('MatrixDlv',{"s ...