React Native WebView使用报错：injectedJavaScript异常及URL无法加载

1. 修复JavaScript注入警告 #

警告核心原因是**window.ReactNativeWebView.postMessage未定义**，要么是WebView桥接未初始化完成就执行了注入脚本，要么是默认注入逻辑存在兼容问题。

解决方法：

• 显式设置injectedJavaScript，确保对象就绪后再调用，同时按警告提示在脚本末尾添加true;：

<WebView
  ref={webviewRef}
  source={{ uri: "https://github.com/facebook/react-native" }}
  injectedJavaScript={`
    setTimeout(() => {
      if (window.ReactNativeWebView) {
        window.ReactNativeWebView.postMessage('页面已加载');
      }
    }, 500);
    true;
  `}
  onMessage={(event) => console.log(event.nativeEvent.data)}
/>

• 如果不需要自定义注入脚本，也可以直接设置空脚本避免默认逻辑报错：

injectedJavaScript={'true;'}

2. 修复URL无法加载问题 #

URL加载失败通常和权限、WebView基础配置有关：

• 检查平台权限：
  • Android：确保AndroidManifest.xml中添加了网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

  • iOS：如果加载HTTP链接，需要在Info.plist中配置NSAppTransportSecurity允许不安全域名；HTTPS链接默认支持。
• 显式开启WebView核心功能：

<WebView
  ref={webviewRef}
  source={{ uri: "https://github.com/facebook/react-native" }}
  javaScriptEnabled={true} // 必须开启，多数网页依赖JS
  domStorageEnabled={true} // 若网页用到localStorage需开启
  injectedJavaScript={'true;'}
/>

3. 修复非视频URI无法全屏问题 #

仅视频能全屏是因为WebView默认限制了其他内容的全屏能力，需添加对应配置：

• iOS：开启allowsFullscreenVideo属性，同时可根据需求调整mediaPlaybackRequiresUserAction；
• Android：确保WebView硬件加速开启（默认开启），若仍有问题可自定义WebChromeClient处理全屏事件（多数场景下添加属性即可）。

最终配置示例：

<WebView
  ref={webviewRef}
  source={{ uri: "https://github.com/facebook/react-native" }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  injectedJavaScript={'true;'}
  allowsFullscreenVideo={true} // 允许所有内容全屏
  mediaPlaybackRequiresUserAction={false} // 可选，允许自动播放媒体
/>

内容的提问来源于stack exchange，提问作者Manish Kumar