本项目基于 react-native-network-logger开发。如果在使用过程中有任何问题，欢迎在AtomGit提交Issue，会及时跟进。

项目介绍

@hxa-rn/react-native-network-logger 是零依赖的 React Native HTTP 流量监控库的鸿蒙适配包，当前版本 3.0.0-beta.1。

核心能力：

• 通过拦截 XMLHttpRequest 捕获应用内 fetch / XHR 请求
• 内置请求列表、详情、搜索、过滤、暂停/清空
• 支持分享完整请求、cURL、HAR 导出（鸿蒙上系统分享不可用时降级为剪贴板）
• 支持 getBackHandler 与现有导航返回键集成
• 支持 light / dark 主题与 compact 紧凑行

本包为 js-only，无 TurboModule / Fabric / C++ Package，无需 HAR 与手动 Link。

集成指南

npm install @hxa-rn/react-native-network-logger

在宿主工程 harmony.alias 映射后，业务代码仍从原包名导入：

import NetworkLogger, {
  startNetworkLogging,
  stopNetworkLogging,
  getRequests,
  clearRequests,
  getBackHandler,
} from 'react-native-network-logger';

分享降级依赖剪贴板时，宿主需安装 @react-native-clipboard/clipboard（并由 harmony.alias 映射到鸿蒙适配包）。库本身不把它作为硬依赖。

使用说明

import React from 'react';
import { View } from 'react-native';
import NetworkLogger, {
  startNetworkLogging,
  stopNetworkLogging,
  clearRequests,
  getBackHandler,
} from 'react-native-network-logger';

startNetworkLogging({
  maxRequests: 500,
  ignoredHosts: ['clients3.google.com'],
  ignoredPatterns: [/^HEAD /],
});

export function NetworkLogScreen({ navigation }: { navigation: { goBack: () => void } }) {
  const onBack = getBackHandler(() => navigation.goBack());

  return (
    <View style={{ flex: 1 }}>
      <NetworkLogger theme="dark" compact={false} sort="desc" maxRows={100} />
    </View>
  );
}

// 停止拦截或清空
// stopNetworkLogging();
// clearRequests();

更多示例见 example、example_auto。

接口文档

组件 NetworkLogger

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | theme | 'light' \| 'dark' \| Partial<Theme> | 'light' | 主题 | | sort | 'asc' \| 'desc' | 'desc' | 列表排序 | | compact | boolean | false | 紧凑行 | | maxRows | number | 当前请求数 | 列表最大显示行数 |

函数 API

| API | 签名 | 说明 | |-----|------|------| | startNetworkLogging | (options?: StartNetworkLoggingOptions) => void | 启用 XHR 拦截 | | stopNetworkLogging | () => void | 停止拦截 | | getRequests | () => NetworkRequestInfo[] | 获取已记录请求 | | clearRequests | () => void | 清空请求 | | getBackHandler | (backHandler: () => any) => () => void | 返回键导航集成 |

StartNetworkLoggingOptions

| 字段 | 类型 | 默认值 | 说明 | |------|------|--------|------| | maxRequests | number | 500 | 最大保留请求数，超出淘汰最早记录 | | ignoredHosts | string[] | — | 忽略主机 | | ignoredUrls | string[] | — | 忽略完整 URL | | ignoredPatterns | RegExp[] | — | 匹配 "METHOD url" 的正则 | | forceEnable | boolean | — | 强制启用（覆盖其他拦截器） | | refreshRate | number | 50 | UI 刷新节流（毫秒） |

类型导出：ThemeName、Theme。

快速验证（运行 Example）

前置条件

| 依赖 | 版本要求 | |------|----------| | Node.js | >= 18 | | DevEco Studio | 5.0+ / 6.0+ | | HarmonyOS SDK | API 12+ |

运行步骤

1. 克隆仓库

git clone https://gitcode.com/hxa-rn/react-native-network-logger.git
cd react-native-network-logger
git checkout br_rnoh0.72

2. 安装仓库开发依赖

npm install --legacy-peer-deps

Example 已改为从 npm 公仓安装 @hxa-rn/[email protected]，不再使用本地 file:../xxx.tgz，运行 Example 不必再执行 npm pack。

3. 进入 example 目录，安装依赖

cd example
npm install --legacy-peer-deps

4. 生成 JS Bundle

npm run dev

产物：harmony/entry/src/main/resources/rawfile/bundle.harmony.js

5. 用 DevEco Studio 打开鸿蒙工程

• 打开 DevEco Studio
• 选择 example/harmony 目录
• 等待 Sync 完成

6. 编译并运行 HAP

在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。

注意：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。

约束与限制

兼容性

• 鸿蒙 SDK：API 12+
• 上游 RN：react-native-network-logger 3.0.0
• React Native / RNOH：RNOH 0.72.x（Example 使用 @react-native-oh/react-native-harmony 0.72.139，react-native 0.72.5）

权限

• 无额外系统权限

其它限制：

• 拦截机制：自 3.0.0 起拦截器内置于本包，不再依赖 RN 私有模块路径；仍通过 XMLHttpRequest.prototype 打补丁，若 RNOH XHR polyfill 冻结原型，拦截会静默失效（列表为空）
• 分享：优先 Share.share；不可用时降级写入剪贴板，再不可用则仅告警、不崩溃
• Blob 响应：responseType === 'blob' 读取失败时降级为原始响应字符串
• 架构：js-only，无需 Autolink / Manual Link / HAR / Package 注册

开源license

本项目基于 MIT 协议，详见 LICENSE 文件。

问题反馈渠道

欢迎在 AtomGit 仓库提交 Issue，或通过 GitCode 反馈。