如何获取React Native WebView组件的页面加载进度并实现进度展示？

当然可以啦！要获取React Native WebView里网页的加载进度和已加载比例其实很简单，核心就是利用WebView组件提供的回调方法。我来给你详细讲讲具体实现方案：

一、核心方案：使用onProgress回调（推荐） #

目前主流的React Native WebView是社区维护的react-native-webview（官方原WebView已迁移到社区），它内置了onProgress回调，能实时返回页面的加载进度比例。

步骤1：安装依赖（如果还没装的话） #

npm install react-native-webview
# 或者用yarn
yarn add react-native-webview

步骤2：实现带进度条的WebView组件 #

下面是一个完整的示例，我们用useState来维护进度值，配合原生组件或自定义样式来展示加载进度：

import React, { useState } from 'react';
import { View, ProgressBar, StyleSheet } from 'react-native';
import WebView from 'react-native-webview';

const WebViewWithProgressTracker = () => {
  // 初始化进度为0，范围是0到1的浮点数
  const [loadingProgress, setLoadingProgress] = useState(0);

  // 监听加载进度变化
  const handleProgressUpdate = (event) => {
    // event.nativeEvent.progress 就是当前已加载的比例（0-1）
    setLoadingProgress(event.nativeEvent.progress);
  };

  return (
    <View style={styles.container}>
      {/* 顶部进度条 */}
      <ProgressBar
        progress={loadingProgress}
        style={styles.progressBar}
        color="#2196F3"
      />
      {/* WebView组件 */}
      <WebView
        source={{ uri: 'https://your-target-url.com' }}
        onProgress={handleProgressUpdate}
        style={styles.webView}
        // 可选：开启JavaScript支持，适配需要JS的网页
        javaScriptEnabled={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  progressBar: {
    height: 4,
    backgroundColor: '#f0f0f0',
  },
  webView: {
    flex: 1,
  },
});

export default WebViewWithProgressTracker;

关键说明： #

• onProgress会在页面加载过程中持续触发，每次返回的event.nativeEvent.progress是0到1之间的浮点数，0代表加载未开始，1代表完全加载完成。
• 你可以直接用这个值来控制进度条的显示，不管是用原生的ProgressBar还是自定义的进度条（比如用View的宽度百分比实现）。

二、备选方案：通过加载阶段回调粗略判断（仅作补充） #

如果遇到旧版本WebView不支持onProgress的特殊场景，可以通过监听加载的不同阶段来大致判断进度：

• onLoadStart：页面开始加载时，设置进度为0.1
• onLoad：页面DOM内容加载完成时，设置进度为0.9
• onLoadEnd：所有资源加载完成时，设置进度为1

不过这种方式只能得到几个关键节点的进度，没有onProgress那么精准，只推荐作为兜底方案。

注意事项 #

• 确保使用最新版本的react-native-webview，旧版本可能没有onProgress回调
• 部分网页可能因为缓存、异步加载内容等原因，进度条会直接跳至1，这是WebView内核的正常表现
• 如果需要自定义进度条样式，完全可以自己实现：比如用一个固定高度的View，通过width: ${loadingProgress * 100}%来动态调整进度宽度

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