详解react-native WebView 返回处理(非回调方法可解决)
1.前言
项目中有些页面内容是变更比较频繁的,这些页面我们会考虑用 网页 来解决。
在rn项目中提供一个公用的web页,如果是网页内容,就跳转到这个界面展示。
此时会有一个问题是,网页会有一级页面,二级页面,这就会设计到导航栏返回键的处理(以及在android上返回键的处理)。
这个问题,在rn官网就可找到解决方式。就是用 onnavigationstatechange 这个回调方法记录当前的导航状态,从而判断是返回上一级页面还是退出这个网页,回到app的其他界面。
但是,当网页的实现是react时,就会有问题了,你会发现,当页面跳转的时候,onnavigationstatechange这个回调方法没有回调!!!怎么肥四!!
一开始尝试了把网页地址换成百度的,可以接收回调,一切都运行的很好,可是换成我们的链接就不行,所以就把锅甩给了后台,以为是react哪边写的不对。
因为上一个项目时间紧,没有时间好好去看一下源码,就想了一个不是很完善的解决方案,就是网页用js来回调app来告知现在的导航状态,这样的解决方式显示是不友好的。
现在稍微有点时间看了源码才知道真正原因。
2.原因
下面就分析一下这个问题的原因和我的解决方式。
1.首先,先找到源码的位置。
node_modules\react-native\reactandroid\src\main\java\com\facebook\react\views\webview
node_modules\react-native\libraries\components\webview
目录结构是这样的:
2.实现的代码段 (java端)
rn的实际运行代码都是原生代码,所以,像webview组件的一些事件回调,其实都是原生代码中的回调触发的。如下
(reactwebviewmanager.java) rn版本0.47.1
protected static class reactwebviewclient extends webviewclient { //webviewclient就是我们在写android原生代码时,监听网页加载情况使用的工具。 protected static final string react_class = "rctwebview"; //定义的原生组件名,在后面js中会对应到。 //... @override public void onpagestarted(webview webview, string url, bitmap favicon) { //有很多回调方法,此处只举一例 super.onpagestarted(webview, url, favicon); mlastloadfailed = false; dispatchevent( webview, new toploadingstartevent( //自己定义的时间,dispatch后,事件会传给js webview.getid(), createwebviewevent(webview, url))); } //... }
(reactwebviewmanager.java) rn版本0.43.3 ,rn不同版本会有代码调整,所以rn升级的时候,需要仔细的回归测试。
protected static class reactwebviewclient extends webviewclient { //webviewclient就是我们在写android原生代码时,监听网页加载情况使用的工具。 protected static final string react_class = "rctwebview"; //定义的原生组件名,在后面js中会对应到。 //... @override public void onpagestarted(webview webview, string url, bitmap favicon) { //有很多回调方法,此处只举一例 super.onpagestarted(webview, url, favicon); mlastloadfailed = false; dispatchevent( webview, new toploadingstartevent( //自己定义的时间,dispatch后,事件会传给js webview.getid(), createwebviewevent(webview, url))); } @override public void doupdatevisitedhistory(webview webview, string url, boolean isreload) { //坑在这,这里就是导航有变化的时候会回调在这个版本是有这个处理的,但是不知道在哪个版本删掉了 -.- super.doupdatevisitedhistory(webview, url, isreload); dispatchevent( webview, new toploadingstartevent( webview.getid(), createwebviewevent(webview, url))); } //... }
(toploadingstartevent.java) 回调js的event
public class toploadingstartevent extends event<toploadingstartevent> { public static final string event_name = "toploadingstart"; //对应方法是onloadingstart, 因为对rn的结构不熟悉,在此处花了很长时间研究是怎么对应的,最后找到了定义对应的文件 private writablemap meventdata; public toploadingstartevent(int viewid, writablemap eventdata) { super(viewid); meventdata = eventdata; } @override public string geteventname() { return event_name; } @override public boolean cancoalesce() { return false; } @override public short getcoalescingkey() { // all events for a given view can be coalesced. return 0; } @override public void dispatch(rcteventemitter rcteventemitter) { rcteventemitter.receiveevent(getviewtag(), geteventname(), meventdata); } }
(node_modules\react-native\reactandroid\src\main\java\com\facebook\react\uimanager\uimanagermoduleconstants.java)
这个文件里,定义了对应关系
/** * constants exposed to js from {@link uimanagermodule}. */ /* package */ class uimanagermoduleconstants { /* package */ static map getdirecteventtypeconstants() { return mapbuilder.builder() .put("topcontentsizechange", mapbuilder.of("registrationname", "oncontentsizechange")) .put("toplayout", mapbuilder.of("registrationname", "onlayout")) .put("toploadingerror", mapbuilder.of("registrationname", "onloadingerror")) .put("toploadingfinish", mapbuilder.of("registrationname", "onloadingfinish")) .put("toploadingstart", mapbuilder.of("registrationname", "onloadingstart")) .put("topselectionchange", mapbuilder.of("registrationname", "onselectionchange")) .put("topmessage", mapbuilder.of("registrationname", "onmessage")) .build(); } }
3.实现的代码段 (js端)
(node_modules\react-native\libraries\components\webview\webview.android.js)
在下面的代码中可以看到只有 onloadingstart 和 onloadingfinish 才会调用 updatenavigationstate ,问题就出现在这了,由于我们的网页实现是react,只有一个页面啊!所以只会调用一次 onloadingstart 和 onloadingfinish 。再点击详情页并不会跳转到新页面,而是刷新原来的页面。所以也就没有 updatenavigationstate 回调了。
class webview extends react.component { static proptypes = { //给外部定义的可设置的属性 ...viewproptypes, rendererror: proptypes.func, renderloading: proptypes.func, onload: proptypes.func, //... } render() { //绘制页面内容 //... var webview = <rctwebview ref={rct_webview_ref} key="webviewkey" style={webviewstyles} source={resolveassetsource(source)} onloadingstart={this.onloadingstart} onloadingfinish={this.onloadingfinish} onloadingerror={this.onloadingerror}/>; return ( <view style={styles.container}> {webview} {otherview} </view> ); } onloadingstart = (event) => { var onloadstart = this.props.onloadstart; onloadstart && onloadstart(event); this.updatenavigationstate(event); }; onloadingfinish = (event) => { var {onload, onloadend} = this.props; onload && onload(event); onloadend && onloadend(event); this.setstate({ viewstate: webviewstate.idle, }); this.updatenavigationstate(event); }; updatenavigationstate = (event) => { if (this.props.onnavigationstatechange) { this.props.onnavigationstatechange(event.nativeevent); } }; } var rctwebview = requirenativecomponent('rctwebview', webview, { //对应上面java中的 ‘rctwebview' nativeonly: { messagingenabled: proptypes.bool, }, }); module.exports = webview;
2.解决方法
既然原因找到了,就容易解决了
解决方式:自定义webview,添加 doupdatevisitedhistory 处理,在每次导航变化的时候,通知js。
1. 拷贝下图中的文件到我们自己项目中的android代码目录下
拷贝完后的android目录:
reactwebviewmanager.java中需要修改几个地方
public class reactwebviewmanager extends simpleviewmanager<webview> { protected static final string react_class = "rctwebview1"; //此处修改一下名字 protected static class reactwebviewclient extends webviewclient { @override public void doupdatevisitedhistory(webview webview, string url, boolean isreload) { super.doupdatevisitedhistory(webview, url, isreload); dispatchevent( //在导航变化的时候,dispatchevent webview, new topcangobackevent( webview.getid(), createcangobackwebviewevent(webview, url))); } } }
topcangobackevent是我自己添加的一个event,专门用来通知导航变化
topcangobackevent.java
public class topcangobackevent extends event<topcangobackevent> { public static final string event_name = "topchange"; private writablemap meventdata; public topcangobackevent(int viewid, writablemap eventdata) { super(viewid); meventdata = eventdata; } @override public string geteventname() { return event_name; } @override public boolean cancoalesce() { return false; } @override public short getcoalescingkey() { // all events for a given view can be coalesced. return 0; } @override public void dispatch(rcteventemitter rcteventemitter) { rcteventemitter.receiveevent(getviewtag(), geteventname(), meventdata); } }
新建 reactwebviewpage.java
public class reactwebviewpackage implements reactpackage { @override public list<nativemodule> createnativemodules(reactapplicationcontext reactcontext) { return collections.emptylist(); } @override public list<viewmanager> createviewmanagers(reactapplicationcontext reactcontext) { return arrays.<viewmanager>aslist( new reactwebviewmanager() ); } }
然后在mainapplication中添加这个模块
public class mainapplication extends application implements reactapplication { @override protected list<reactpackage> getpackages() { return arrays.<reactpackage>aslist( new mainreactpackage(), new reactwebviewpackage() //webview ); } }
以上就是android需要修改的地方,ios我没有尝试过,应该大差不差同一个道理。
2. 拷贝下图中的文件到我们自己项目中的js代码目录下,并修改一下名字
js代码目录:
customwebview.android.js 有几个地方需要修改。
/** * copyright (c) 2015-present, facebook, inc. * all rights reserved. * * this source code is licensed under the bsd-style license found in the * license file in the root directory of this source tree. an additional grant * of patent rights can be found in the patents file in the same directory. * * @providesmodule customwebview //此处需要修改名称 */ var rct_webview_ref = 'webview1'; //此处需要修改名称 render() { var webview = <nativewebview onloadingstart={this.onloadingstart} onloadingfinish={this.onloadingfinish} onloadingerror={this.onloadingerror} onchange={this.onchange} //添加方法 />; return ( <view style={styles.container}> {webview} {otherview} </view> ); } onchange = (event) => { //添加方法 this.updatenavigationstate(event); }; } var rctwebview = requirenativecomponent('rctwebview1', customwebview, customwebview.extranativecomponentconfig); //修改名称 module.exports = customwebview; //修改名称
至此就完成自定义webview模块。也可以解决网页是react实现,不能导航的问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 甘特图应用之使用颜色的技巧