解决: React Native android webview 空白页

Android react-native-webview 之前是正常的, 升级了 react-native / react-native-webview 等 之后, 就变成了空白页.

通过下面的修改, 可以修复, 回到正常的状态.

来源: https://github.com/react-native-webview/react-native-webview/issues/3697

注意 ts 文件一定要改, 至关重要

git 复制代码
index ff2cba5f710988acafe9dbc42ca814ea8622d8c3..47f37776e63eacfae8d41dd5c1adff51e317366d 100644
--- a/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
+++ b/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
@@ -313,6 +313,12 @@ public class RNCWebViewManager extends ViewGroupManager<RNCWebViewWrapper>
         mRNCWebViewManagerImpl.setSource(view, value);
     }
 
+    @Override
+    @ReactProp(name = "source")
+    public void setSource(RNCWebViewWrapper view, @Nullable ReadableMap value) {
+        mRNCWebViewManagerImpl.setSource(view, value);
+    }
+
     @Override
     @ReactProp(name = "textZoom")
     public void setTextZoom(RNCWebViewWrapper view, int value) {
diff --git a/src/RNCWebViewNativeComponent.ts b/src/RNCWebViewNativeComponent.ts
index e2ddd361e1e2cb647bee370146b0ed020fb9fd02..39c8d3ec15cf878af0858a0abbb138982182cfe1 100644
--- a/src/RNCWebViewNativeComponent.ts
+++ b/src/RNCWebViewNativeComponent.ts
@@ -287,6 +287,15 @@ export interface NativeProps extends ViewProps {
     html?: string;
     baseUrl?: string;
   }>;
+  source: Readonly<{
+    uri?: string;
+    method?: string;
+    body?: string;
+
+    headers?: ReadonlyArray<Readonly<{ name: string; value: string }>>;
+    html?: string;
+    baseUrl?: string;
+  }>;
   userAgent?: string;
   injectedJavaScriptObject?: string;
 }
 

如果有错误:

sh 复制代码
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-webview:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler output below.
  /Users/xxx/projects/xxxxx/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java:36: 错误: RNCWebViewManager不是抽象的, 并且未覆盖RNCWebViewManagerInterface中的抽象方法setSource(RNCWebViewWrapper,ReadableMap)
  public class RNCWebViewManager extends ViewGroupManager<RNCWebViewWrapper>
         ^
  注: 某些输入文件使用或覆盖了已过时的 API。
  注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。
  1 个错误

* Try:
> Check your code and dependencies to fix the compilation error(s)
> Run with --scan to get full insights.

修改以下代码:

java 复制代码
    // @Override
    @ReactProp(name = "source")
    public void setSource(RNCWebViewWrapper view, @Nullable ReadableMap value) {
        mRNCWebViewManagerImpl.setSource(view, value);
    }

@Override 注释了

相关推荐
东风西巷4 小时前
NealFun安卓版:创意无限,娱乐至上
android·人工智能·智能手机·娱乐·软件需求
伍哥的传说7 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
小李飞飞砖9 小时前
Sophix、Tinker 和 Robust 三大主流 Android 热修复框架的详细对比
android
TE-茶叶蛋10 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
感觉不怎么会11 小时前
Android 12 - 部分相机横屏显示方案
android
人生游戏牛马NPC1号12 小时前
学习 Flutter (一)
android·学习·flutter
fundroid13 小时前
Swift 进军 Android,Kotlin 该如何应对?
android·ios
前端世界13 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
android·安全·harmonyos
西瓜_号码13 小时前
React中Redux基础和路由介绍
javascript·react.js·ecmascript
伟笑15 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js