我正在开发一个 Expo 项目,该项目使用 WebView 组件来显示 Web 内容。虽然 Android 设备上一切正常,但 iOS 设备上屏幕显示为空白。以下是有关我的环境的相关代码和详细信息以及我为调试问题所采取的步骤。
我的环境: 世博SDK版本:51 React Native WebView 版本:11.26.1 开发环境:macOS 目标 iOS 版本:iOS 16 测试设备/模拟器:iPhone 14模拟器 代码示例: 这是我的应用程序中 WebView 组件的简单实现:
import React from 'react';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
source={{ uri: 'https://example.com' }} // Loading a test URL
style={{ flex: 1 }} // Ensuring it takes the full screen
/>
);
}
我尝试过的: 已验证基本设置:确保正确导入和配置 WebView,如上面的代码所示。 检查 iOS 权限:检查 app.json 和 Info.plist 以确保添加必要的权限(例如,HTTP URL 的 NSAppTransportSecurity)。 简化测试:使用基本 URL (https://example.com) 来消除目标内容的潜在问题。 重建项目:尝试清除缓存并使用 expo build 重建应用程序。 尽管做出了这些努力,问题仍然存在。
观察到的行为: Android:WebView 按预期加载内容。 iOS:屏幕保持空白,Expo 日志中没有错误消息。 我的问题: WebView 是否需要任何额外的 iOS 特定配置才能正常工作? 有没有人遇到过类似的问题并找到解决方案? 预先感谢您的帮助!
这就是我修复它的方法
"react-native-web": "~0.19.12",
"react-native-webview": "13.12.2",
const [ ready, setReady ] = useState(false);
const [ webkey, setWebkey ] = useState(0);
<Webview
key = { webkey }
onLoadEnd={()=>{
if( !ready ){
setWebKey(Date.now());
setReady(true)
}
}}
/>
来源:https://github.com/react-native-webview/react-native-webview/issues/3616#issuecomment-2494300117