react-native-network-logger

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

项目介绍

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

核心能力：

• 通过拦截 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 main

2. 安装仓库开发依赖

npm install --legacy-peer-deps

Example 已改为从 npm 公仓安装 @hxa-rn/react-native-network-logger@3.0.3，不再使用本地 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 反馈。