React-Native webview遇到的坑及android源码解析（一）

最新推荐文章于 2024-04-06 16:20:21 发布

原创

最新推荐文章于 2024-04-06 16:20:21 发布 · 5.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在React Native中使用WebView遇到的挑战，尤其是Android平台上的问题。作者详细介绍了如何通过修改源码和自定义组件，实现WebView加载进度的监听，并在RN应用中展示。通过创建CusWebView.js、修改Android原生代码以及建立RN与原生之间的通信，成功解决了RN WebView无内置进度监听的问题，提供了一种实践解决方案。

前言：因为刚换工作的原因，好久没写博客了，目前一直在做跟rn相关的东西，android已经停滞快半年了，h5也差不多，说多了感觉心累啊，有些东西你不碰的话还真会忘记，真是二者不可兼得额，废话不多说了，最近在看rn的webview，很听很多小伙伴说了，rn的webview很多坑，特别是android！！好吧～那我们就带着小伙伴的需求跟坑一步一步的解析下源码～～

一、获取webview的加载进度，rn中用进度条显示

做过原生android的都知道，如果要监听webview的progress只需要进行如下操作就可以了：

private class MyWebCromeClient extends WebChromeClient {
   
   
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress == 100) {
            //加载完毕进度条消失
            progressView.setVisibility(View.GONE);
        } else {
            //更新进度
            progressView.setProgress(newProgress);
        }
        super.onProgressChanged(view, newProgress);
    }
}

是的，在android原生中很简单，但是rn的webview并没有给我们提供这样的需求，看rn的webview源码我们可以看到就给我们提供了两个方法：

这里写图片描述

 onLoadingStart={
  
  this.onLoadingStart}
 onLoadingFinish={
  
  this.onLoadingFinish}

所以这时有小伙伴说了，rn原生webview很坑！！于是马上转换思路了，rn原生没有这方法，那只有让原生写个页面了，rn直接跳转过去，是的，没错！可以这样做，但是就失去一个rn app的含义了，然后还会牵扯出一堆原生路由跟rn路由的坑～所以我们得换一个思路了，既然rn的webview没有这方法，我们可以重写一个叫webview2的组件。
第一种解决方法我就不说了～
第二种解决方法：
第一步：我们直接copy一个rn的webview叫CusWebView.js:
(/node_modules/react-native/Libraries/Components/WebView/WebView.android.js)

这里写图片描述

copy完后，我们把原本的这行代码：

var RCTWebView = requireNativeComponent('RCTWebView', WebView1, WebView1.extraNativeComponentConfig);

改为：

var RCTWebView = requireNativeComponent('RCTWebView1', WebView1, WebView1.extraNativeComponentConfig);

可以看到，我们只是把RCTWebView改为了RCTWebView1，然而这个RCTWebView1是哪来的呢？对的！原生过来的，所以接下来我们去操作一波android。

copy一下源码这两个文件：
这里写图片描述

然后copy两份到我们的工程目录下，我们修改下ReactWebViewManager，为起添加进度条监听：

  @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        。。。。

最低0.47元/天解锁文章