解决: React Native iOS webview 空白页

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

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

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

git 复制代码
diff --git a/node_modules/react-native-webview/apple/RNCWebView.mm b/node_modules/react-native-webview/apple/RNCWebView.mm
index f9d080e..10d90ee 100644
--- a/node_modules/react-native-webview/apple/RNCWebView.mm
+++ b/node_modules/react-native-webview/apple/RNCWebView.mm
@@ -244,7 +244,7 @@ - (instancetype)initWithFrame:(CGRect)frame
                 webViewEventEmitter->onHttpError(data);
             }
         };
-        self.contentView = _view;
+        [self addSubview:_view];
     }
     return self;
 }
@@ -488,6 +488,12 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     [super updateProps:props oldProps:oldProps];
 }
 
+-(void)layoutSubviews
+{
+  [super layoutSubviews];
+  _view.frame = self.bounds;
+}
+
 - (void)handleCommand:(nonnull const NSString *)commandName args:(nonnull const NSArray *)args {
     RCTRNCWebViewHandleCommand(self, commandName, args);
 }
 
git 复制代码
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 复制代码
cd iOS
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf build Podfile.lock Pods
pod install
相关推荐
知识分享小能手33 分钟前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
ps_xiaowang2 小时前
React Query入门指南:简化React应用中的数据获取
前端·其他·react native·react.js
市民中心的蟋蟀4 小时前
第三章 钩入React 【上】
前端·react.js·架构
2501_915909065 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
PanZonghui5 小时前
Zustand 实战指南:从基础到高级,构建类型安全的状态管理
前端·react.js
PanZonghui5 小时前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
liangshanbo12156 小时前
React 18 的自动批处理
前端·javascript·react.js
前端OnTheRun6 小时前
React18学习笔记(五) 【总结】常用的React Hooks函数,常用React-Redux Hooks函数和React中的组件通信
react.js·react-redux·组件通信
ObjectX前端实验室8 小时前
React Fiber 双缓冲树机制深度解析
前端·react.js
ObjectX前端实验室10 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js