React Native WebView 使用指南：从基础到高级功能详解

React Native WebView 使用指南：从基础到高级功能详解

react-native-webview React Native Cross-Platform WebView 项目地址: https://gitcode.com/gh_mirrors/re/react-native-webview

前言

React Native WebView 是 React Native 生态中用于在移动应用中嵌入网页内容的核心组件。本文将全面介绍 WebView 的各种使用场景和技巧，帮助开发者快速掌握这个强大组件的使用方法。

基础使用

1. 内联 HTML 显示

最简单的使用方式是直接显示静态 HTML 内容：

import React from 'react';
import { WebView } from 'react-native-webview';

const InlineHTMLExample = () => (
  <WebView
    originWhitelist={['*']}
    source={{ html: '<h1>欢迎使用WebView</h1>' }}
  />
);

注意：使用内联 HTML 时必须设置 originWhitelist 属性为 ['*']。

2. 加载远程 URL

最常见的场景是加载远程网页：

const URLExample = () => (
  <WebView source={{ uri: 'https://reactnative.dev/' }} />
);

进阶功能

3. 本地 HTML 文件加载

目前官方方案存在一些问题，推荐以下替代方案：

• 使用 webpack 等工具打包所有资源
• 运行本地静态服务器

4. 导航状态控制

通过 onNavigationStateChange 可以拦截页面导航：

class NavigationControl extends React.Component {
  handleNavigationChange = (newNavState) => {
    const { url } = newNavState;
    if (!url) return;
    
    // 拦截PDF文件
    if (url.includes('.pdf')) {
      this.webview.stopLoading();
      // 打开PDF查看器
    }
  };

  render() {
    return (
      <WebView
        ref={(ref) => (this.webview = ref)}
        source={{ uri: 'https://example.com' }}
        onNavigationStateChange={this.handleNavigationChange}
      />
    );
  }
}

文件上传与下载

5. 文件上传支持

iOS 配置

在 Info.plist 中添加相册和相机权限描述。

Android 配置

在 AndroidManifest.xml 中添加存储权限：

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

检查支持情况

WebView.isFileUploadSupported().then(res => {
  if (res) {
    // 支持文件上传
  }
});

6. 多文件上传

通过 HTML input 元素的 multiple 属性控制：

<input type="file" multiple />  <!-- 多选 -->
<input type="file" />           <!-- 单选 -->

7. 文件下载支持

iOS 实现

使用 onFileDownload 回调处理下载：

<WebView
  onFileDownload={({ nativeEvent }) => {
    const { downloadUrl } = nativeEvent;
    // 处理下载逻辑
  }}
/>

Android 实现

自动集成 DownloadManager，只需添加存储权限。

JavaScript 与原生通信

8. 通信方式

提供三种主要通信方式：

1. React Native → Web：injectedJavaScript 属性
2. React Native → Web：injectJavaScript 方法
3. Web → React Native：postMessage 方法和 onMessage 属性

注入 JavaScript 示例

const JsInjectionExample = () => (
  <WebView
    source={{ uri: 'https://example.com' }}
    injectedJavaScript={`
      document.body.style.backgroundColor = 'blue';
      true; // 必须返回true
    `}
    onMessage={() => {}}
  />
);

预加载 JavaScript 示例

<WebView
  source={{ uri: 'https://example.com' }}
  injectedJavaScriptBeforeContentLoaded={`
    window.appConfig = { isNative: true };
    true;
  `}
/>

注入 JavaScript 对象

更可靠的对象注入方式：

<WebView
  source={{ html: yourHtml }}
  injectedJavaScriptObject={{ 
    apiKey: '12345',
    environment: 'production'
  }}
/>

在网页中通过 ReactNativeWebView.injectedObjectJson() 访问。

最佳实践建议

1. 性能优化：对于复杂网页，考虑使用硬件加速
2. 内存管理：Android 平台需要注意 WebView 内存泄漏问题
3. 安全考虑：谨慎处理与网页的通信，避免 XSS 攻击
4. 错误处理：实现 onError 回调处理加载失败情况

结语

React Native WebView 提供了强大的网页嵌入能力，通过本文介绍的各种技术，开发者可以实现从简单的网页展示到复杂的原生-网页交互。根据实际需求选择合适的实现方式，并注意各平台的差异性，将能充分发挥 WebView 组件的潜力。

react-native-webview React Native Cross-Platform WebView 项目地址: https://gitcode.com/gh_mirrors/re/react-native-webview