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

目录结构是这样的：

/**
* 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;  //修改名称

View Code

至此就完成自定义WebView模块。也可以解决网页是React实现，不能导航的问题。

不善排版，看不懂的可留言