QQ登录

只需一步,快速开始

微信登录

扫一扫,访问微社区

乐分享

查看: 731|回复: 0

React Native WebView 内点击事件获取onNavigationStateChange、onMessage

[复制链接]

73

主题

170

帖子

996

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
996
发表于 2018-3-15 14:54:48 | 显示全部楼层 |阅读模式
React Native WebView 内点击事件获取
问题描述:

在RN的WebView里边,很多时候需要获取一个点击事件,来操作原生代码处理一些事情。可以使用onNavigationStateChange、onMessage来解决
代码

通过onNavigationStateChange :官方文档是这么写的Function that is invoked when the WebView loading starts or ends.那么这个方法到底是做什么的呢?

<WebView
    onNavigationStateChange={(event)=>{console.log(event)}}
    style={{flex:1}}
    source={{html:this.state.Html}}
/>
console log:这个输出是刚进入webview这个页面的输出

{ target: 809,
  canGoBack: false,
  loading: false,
  title: '',
  canGoForward: false,
  navigationType: 'other',
  url: 'about:blank' }

当点击webview中的一个跳转按钮会输出如下:

{ target: 809,
  canGoBack: false,
  loading: false,
  title: 'tab2',
  canGoForward: false,
  navigationType: 'click',
  url: 'a.html' }      //这个a.html就是我们刚才点击的链接要访问的地址


其中不难发现,我们刚进入webview的时候 navigationType 为other,而点击跳转的时候则为click,好吧说到这里,估计大家都应该明白这个方法是做什么了。注意:这个方法无法阻止页面的跳转行为,所以大家只能通过这个方法获取用户的一些行为。从而做出判断。

但有很多情况,我们都是想,获取到这个行为,传值到RN再做其他事情,下面就做一个简单的例子onMessage。官方文档是这样描述的:

A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.

window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data must be a string.

可以看出,这个方法用来和RN进行交互,必须注意的就是 当webview显示的页面中有 postMessage的同名函数时将会报错。

onMessage(func)

/*RN中*/
<WebView
   onNavigationStateChange={(event)=>{console.log(event)}}
   onMessage={(event)=>{console.log(event.nativeEvent)}}
   style={{flex:1}}
   source={{html:this.state.Html}}
/>

/*html中*/
<a href='javascript:postMsg()'>

/*html中javascript,webview显示的html中一个a标签,调用postMsg,通过window.postMessage 传递123这个字符串到RN中。*/
<script>function postMsg(){window.postMessage('123')}</script>

console log:当点击a标签的时候后台会出现如下输出
/*onNavigationStateChange log */
{ target: 808,  
  canGoBack: false,
  loading: false,
  title: 'tab2',
  canGoForward: false,
  navigationType: 'other',
  url: 'react-js-navigation://postMessage?123' }
/* onMessage log*/
{ target: 808,
  canGoBack: false,
  data: '123',
  loading: false,
  title: 'tab2',
  canGoForward: false,
  url: 'about:blank' }

估计大家看到这里 应该脑洞大开了,这样在RN中就能够获取 标签、用户行为、交互数据。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋| 乐分享

GMT+8, 2019-5-20 22:51 , Processed in 0.066304 second(s), 20 queries .

快速回复 返回顶部 返回列表