欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

📌 开发环境声明：本文基于 React Native 0.72.90 版本进行开发适配

---

🚀 一、开篇引言

网络信息获取是移动应用开发中的常见需求，无论是获取设备IP地址、WiFi SSID、子网掩码等信息，都需要与原生网络接口进行交互。本文将带你深入了解如何在 HarmonyOS 平台上集成和使用 @react-native-ohos/react-native-network-info，实现完整的网络信息获取功能。

1.1 你将学到什么？

• ✅ NetworkInfo 的核心概念与工作原理
• ✅ HarmonyOS 平台的完整集成流程
• ✅ 网络信息获取的多种实现方式
• ✅ NetworkInfo API 的深度解析
• ✅ 实际应用场景的最佳实践

1.2 适用人群

• 正在进行 React Native 鸿蒙化迁移的开发者
• 需要获取网络详细信息的应用开发者
• 对跨平台网络编程感兴趣的技术爱好者

---

📦 二、库概览

2.1 基本信息

项目	内容
库名称	@react-native-ohos/react-native-network-info
原库名称	react-native-network-info
版本信息	5.2.2 (RN 0.72) / 5.3.0 (RN 0.77)
官方仓库	https://github.com/react-native-oh-library/react-native-network-info
开源协议	MIT

2.2 核心能力矩阵

能力项	描述	HarmonyOS 支持
IP地址获取	IPv4/IPv6地址	✅ 完全支持
WiFi信息获取	SSID、BSSID等	✅ 完全支持
网络配置获取	子网掩码、网关等	✅ 完全支持
信号信息获取	频率、信号强度	✅ 完全支持
广播地址获取	网络广播地址	✅ 完全支持

2.3 技术架构图

2.4 典型应用场景

场景	描述	示例
设备识别	通过IP地址识别设备	📱 192.168.1.100
网络诊断	获取网络配置信息	🔧 子网掩码检测
WiFi信息展示	显示当前连接的WiFi名称	📶 WiFi: MyWiFi
网络安全检测	检查网络配置安全性	🔒 网关安全检查
局域网通信	获取广播地址进行通信	📡 局域网广播

---

⚡ 三、快速开始

3.1 环境要求

依赖项	版本要求
React Native	0.72.x
RNOH (鸿蒙框架)	0.72.90
HarmonyOS SDK	6.0.0.47+ (API 20)
DevEco Studio	5.0.3+ / 6.0+
Node.js	16.18.0+ / 18.x

3.2 一键安装

创建鸿蒙项目的过程不再进行描述，不懂得看这篇：https://blog.csdn.net/u011178696/article/details/151932277

# RN 0.72 版本
npm install @react-native-ohos/react-native-network-info@5.2.2-rc.1

3.3 验证安装

# 检查 package.json
type package.json | findstr network-info

# 预期输出
# "@react-native-ohos/react-native-network-info": "^5.2.2"

---

🔧 四、HarmonyOS 集成详解

4.1 配置清单

📌 按顺序完成以下配置，缺一不可

步骤	配置文件	操作	重要程度
1	harmony/oh-package.json5	添加 overrides	⭐⭐⭐
2	harmony/entry/oh-package.json5	添加依赖	⭐⭐⭐
3	harmony/entry/src/main/cpp/CMakeLists.txt	配置编译链接	⭐⭐⭐
4	harmony/entry/src/main/cpp/PackageProvider.cpp	引入头文件	⭐⭐⭐
5	harmony/entry/src/main/ets/RNPackagesFactory.ts	引入包	⭐⭐⭐
6	harmony/entry/src/main/module.json5	添加权限	⭐⭐⭐

4.2 方式一：HAR 包引入（推荐）

HAR 包引入方式简单快捷，适合大多数场景。

步骤一：配置 overrides

打开 harmony/oh-package.json5，添加以下配置：

{
  "overrides": {
    "@rnoh/react-native-openharmony": "0.72.90"
  }
}

步骤二：添加依赖

打开 harmony/entry/oh-package.json5，添加依赖：

"dependencies": {
  "@rnoh/react-native-openharmony": "0.72.90",
  "@react-native-ohos/react-native-network-info": "file:../../node_modules/@react-native-ohos/react-native-network-info/harmony/rn_network_info.har"
}

步骤三：同步依赖

点击 DevEco Studio 右上角的 sync 按钮，或者在终端执行：

cd harmony/entry
ohpm install

步骤四：配置 CMakeLists.txt

打开 harmony/entry/src/main/cpp/CMakeLists.txt，添加：

set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-network-info/src/main/cpp" ./rn_network_info)

target_link_libraries(rnoh_app PUBLIC rnoh_network_info)

步骤五：修改 PackageProvider.cpp

打开 harmony/entry/src/main/cpp/PackageProvider.cpp，添加：

#include "NetworkInfoPackage.h"

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<NetworkInfoPackage>(ctx),
    };
}

步骤六：引入 RNNetworkInfoPackage

打开 harmony/entry/src/main/ets/RNPackagesFactory.ts，添加：

import { RNNetworkInfoPackage } from '@react-native-ohos/react-native-network-info/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new RNNetworkInfoPackage(ctx),
  ];
}

4.3 方式二：源码引入

源码引入方式适合需要调试或修改原生代码的场景。

步骤一：配置 overrides

打开 harmony/oh-package.json5，添加以下配置：

{
  "overrides": {
    "@rnoh/react-native-openharmony": "0.72.90"
  }
}

步骤二：复制源码模块

把 node_modules/@react-native-ohos/react-native-network-info/harmony/rn_network_info 复制到 harmony/ 目录下。

步骤三：添加模块配置

打开 harmony/build-profile.json5，添加模块：

modules: [
  {
    name: 'rn_network_info',
    srcPath: './rn_network_info',
  }
]

步骤四：修改 rn_network_info/oh-package.json5

打开 harmony/rn_network_info/oh-package.json5，修改 react-native-openharmony 版本与项目版本一致：

{
  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.90"
  }
}

步骤五：添加依赖

打开 harmony/entry/oh-package.json5，添加依赖：

"dependencies": {
  "@rnoh/react-native-openharmony": "0.72.90",
  "@react-native-ohos/react-native-network-info": "file:../rn_network_info"
}

步骤六：同步依赖

点击 DevEco Studio 右上角的 sync 按钮，或者在终端执行：

cd harmony/entry
ohpm install

步骤七：配置 CMakeLists.txt

打开 harmony/entry/src/main/cpp/CMakeLists.txt，添加：

set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-network-info/src/main/cpp" ./rn_network_info)

target_link_libraries(rnoh_app PUBLIC rnoh_network_info)

步骤八：修改 PackageProvider.cpp

打开 harmony/entry/src/main/cpp/PackageProvider.cpp，添加：

#include "NetworkInfoPackage.h"

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
        std::make_shared<NetworkInfoPackage>(ctx),
    };
}

步骤九：引入 RNNetworkInfoPackage

打开 harmony/entry/src/main/ets/RNPackagesFactory.ts，添加：

import { RNNetworkInfoPackage } from '@react-native-ohos/react-native-network-info/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new RNNetworkInfoPackage(ctx),
  ];
}

4.4 同步并运行

点击 DevEco Studio 右上角的 sync 按钮，然后编译、运行即可。

---

💻 五、实战演练

场景：网络信息面板

需求描述：实现一个网络信息面板，展示当前设备的各种网络信息，包括IP地址、WiFi信息、网络配置等。

实现思路：

1. 使用 NetworkInfo.getIPAddress() 获取IP地址
2. 使用 NetworkInfo.getSSID() 获取WiFi名称
3. 使用 NetworkInfo.getSubnet() 获取子网掩码
4. 使用 NetworkInfo.getGatewayIPAddress() 获取网关地址

实现代码：

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import { NetworkInfo } from 'react-native-network-info';

interface NetworkInfoState {
  ipAddress: string | null;
  ipv4Address: string | null;
  broadcast: string | null;
  ssid: string | null;
  bssid: string | null;
  subnet: string | null;
  gateway: string | null;
  frequency: number | null;
}

export default function App() {
  const [info, setInfo] = useState<NetworkInfoState>({
    ipAddress: null,
    ipv4Address: null,
    broadcast: null,
    ssid: null,
    bssid: null,
    subnet: null,
    gateway: null,
    frequency: null,
  });

  const getInfoItem = (label: string, value: string | number | null) => (
    <View style={styles.infoItem}>
      <Text style={styles.infoLabel}>{label}</Text>
      <Text style={styles.infoValue}>{value || '获取中...'}</Text>
    </View>
  );

  const fetchAllInfo = async () => {
    try {
      const [
        ipAddress,
        ipv4Address,
        broadcast,
        ssid,
        bssid,
        subnet,
        gateway,
        frequency,
      ] = await Promise.all([
        NetworkInfo.getIPAddress(),
        NetworkInfo.getIPV4Address(),
        NetworkInfo.getBroadcast(),
        NetworkInfo.getSSID(),
        NetworkInfo.getBSSID(),
        NetworkInfo.getSubnet(),
        NetworkInfo.getGatewayIPAddress(),
        NetworkInfo.getFrequency(),
      ]);

      setInfo({
        ipAddress,
        ipv4Address,
        broadcast,
        ssid,
        bssid,
        subnet,
        gateway,
        frequency,
      });
    } catch (error) {
      console.error('获取网络信息失败:', error);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
        <Text style={styles.title}>网络信息面板</Text>

        <TouchableOpacity style={styles.refreshButton} onPress={fetchAllInfo}>
          <Text style={styles.refreshButtonText}>刷新网络信息</Text>
        </TouchableOpacity>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>IP 地址信息</Text>
          {getInfoItem('IP 地址', info.ipAddress)}
          {getInfoItem('IPv4 地址', info.ipv4Address)}
          {getInfoItem('广播地址', info.broadcast)}
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>WiFi 信息</Text>
          {getInfoItem('SSID', info.ssid)}
          {getInfoItem('BSSID', info.bssid)}
          {getInfoItem('频率', info.frequency ? `${info.frequency} MHz` : null)}
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>网络配置</Text>
          {getInfoItem('子网掩码', info.subnet)}
          {getInfoItem('默认网关', info.gateway)}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    marginBottom: 20,
  },
  refreshButton: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 20,
  },
  refreshButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  section: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 12,
  },
  infoItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  infoLabel: {
    fontSize: 14,
    color: '#666',
  },
  infoValue: {
    fontSize: 14,
    fontWeight: '500',
    color: '#333',
  },
});

---

📖 六、API 详解

6.1 getIPAddress()

获取本地 IP 地址。

语法：

NetworkInfo.getIPAddress(): Promise<string | null>

返回值：返回 IP 地址字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getLocalIP() {
  const ip = await NetworkInfo.getIPAddress();
  console.log('本地IP地址:', ip);
}

// 带错误处理
async function getLocalIPSafe() {
  try {
    const ip = await NetworkInfo.getIPAddress();
    if (ip) {
      console.log('本地IP地址:', ip);
      return ip;
    } else {
      console.log('无法获取IP地址');
      return null;
    }
  } catch (error) {
    console.error('获取IP地址失败:', error);
    return null;
  }
}

// 判断是否在特定网段
async function isInLocalNetwork() {
  const ip = await NetworkInfo.getIPAddress();
  if (ip && ip.startsWith('192.168.1.')) {
    console.log('设备在192.168.1.x网段');
    return true;
  }
  return false;
}

6.2 getIPV4Address()

获取 IPv4 地址，优先 WiFi，其次蜂窝网络。

语法：

NetworkInfo.getIPV4Address(): Promise<string | null>

返回值：返回 IPv4 地址字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getIPv4() {
  const ipv4 = await NetworkInfo.getIPV4Address();
  console.log('IPv4地址:', ipv4);
}

// 验证IP地址格式
async function validateIPv4() {
  const ipv4 = await NetworkInfo.getIPV4Address();
  if (ipv4) {
    const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
    if (ipv4Regex.test(ipv4)) {
      console.log('有效的IPv4地址:', ipv4);
      return true;
    }
  }
  return false;
}

// 获取IP地址各部分
async function parseIPv4() {
  const ipv4 = await NetworkInfo.getIPV4Address();
  if (ipv4) {
    const parts = ipv4.split('.');
    console.log('IP地址各部分:', parts);
    console.log('网络部分:', `${parts[0]}.${parts[1]}`);
    console.log('主机部分:', `${parts[2]}.${parts[3]}`);
  }
}

6.3 getSSID()

获取当前连接的 WiFi SSID（网络名称）。

语法：

NetworkInfo.getSSID(): Promise<string | null>

返回值：返回 SSID 字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getWiFiName() {
  const ssid = await NetworkInfo.getSSID();
  console.log('WiFi名称:', ssid);
}

// 判断是否连接到特定WiFi
async function isConnectedToOfficeWiFi() {
  const ssid = await NetworkInfo.getSSID();
  const officeWiFiNames = ['Office-WiFi', 'Company-5G', 'Work-Network'];
  
  if (ssid && officeWiFiNames.includes(ssid)) {
    console.log('已连接到办公WiFi');
    return true;
  }
  return false;
}

// 显示WiFi信息
async function showWiFiInfo() {
  const ssid = await NetworkInfo.getSSID();
  if (ssid) {
    console.log('当前WiFi:', ssid);
    console.log('WiFi名称长度:', ssid.length);
  } else {
    console.log('未连接WiFi或无法获取WiFi名称');
  }
}

6.4 getBSSID()

获取当前连接的 WiFi BSSID（路由器MAC地址）。

语法：

NetworkInfo.getBSSID(): Promise<string | null>

返回值：返回 BSSID 字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getRouterMAC() {
  const bssid = await NetworkInfo.getBSSID();
  console.log('路由器MAC地址:', bssid);
}

// 识别特定路由器
async function identifyRouter() {
  const bssid = await NetworkInfo.getBSSID();
  const knownRouters: Record<string, string> = {
    '00:11:22:33:44:55': '客厅路由器',
    'AA:BB:CC:DD:EE:FF': '卧室路由器',
  };
  
  if (bssid && knownRouters[bssid]) {
    console.log('连接到:', knownRouters[bssid]);
    return knownRouters[bssid];
  }
  return '未知路由器';
}

// 验证BSSID格式
async function validateBSSID() {
  const bssid = await NetworkInfo.getBSSID();
  if (bssid) {
    const bssidRegex = /^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/;
    if (bssidRegex.test(bssid)) {
      console.log('有效的BSSID:', bssid);
      return true;
    }
  }
  return false;
}

6.5 getBroadcast()

获取网络广播地址。

语法：

NetworkInfo.getBroadcast(): Promise<string | null>

返回值：返回广播地址字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getBroadcastAddress() {
  const broadcast = await NetworkInfo.getBroadcast();
  console.log('广播地址:', broadcast);
}

// 局域网广播示例
async function broadcastMessage() {
  const broadcast = await NetworkInfo.getBroadcast();
  if (broadcast) {
    console.log('可以向该地址发送广播消息:', broadcast);
  }
}

// 计算广播地址
async function calculateBroadcast() {
  const [ip, subnet] = await Promise.all([
    NetworkInfo.getIPAddress(),
    NetworkInfo.getSubnet(),
  ]);
  
  if (ip && subnet) {
    console.log('IP地址:', ip);
    console.log('子网掩码:', subnet);
    const broadcast = await NetworkInfo.getBroadcast();
    console.log('广播地址:', broadcast);
  }
}

6.6 getSubnet()

获取子网掩码。

语法：

NetworkInfo.getSubnet(): Promise<string | null>

返回值：返回子网掩码字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getSubnetMask() {
  const subnet = await NetworkInfo.getSubnet();
  console.log('子网掩码:', subnet);
}

// 计算网络地址
async function calculateNetworkAddress() {
  const [ip, subnet] = await Promise.all([
    NetworkInfo.getIPAddress(),
    NetworkInfo.getSubnet(),
  ]);
  
  if (ip && subnet) {
    const ipParts = ip.split('.').map(Number);
    const subnetParts = subnet.split('.').map(Number);
    const networkParts = ipParts.map((part, i) => part & subnetParts[i]);
    const networkAddress = networkParts.join('.');
  
    console.log('网络地址:', networkAddress);
    return networkAddress;
  }
  return null;
}

// 判断两台设备是否在同一网段
async function isSameSubnet(otherIP: string) {
  const [myIP, subnet] = await Promise.all([
    NetworkInfo.getIPAddress(),
    NetworkInfo.getSubnet(),
  ]);
  
  if (myIP && subnet) {
    const myParts = myIP.split('.').map(Number);
    const otherParts = otherIP.split('.').map(Number);
    const subnetParts = subnet.split('.').map(Number);
  
    const myNetwork = myParts.map((part, i) => part & subnetParts[i]);
    const otherNetwork = otherParts.map((part, i) => part & subnetParts[i]);
  
    return myNetwork.join('.') === otherNetwork.join('.');
  }
  return false;
}

6.7 getGatewayIPAddress()

获取默认网关 IP 地址。

语法：

NetworkInfo.getGatewayIPAddress(): Promise<string | null>

返回值：返回网关地址字符串，如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getGateway() {
  const gateway = await NetworkInfo.getGatewayIPAddress();
  console.log('默认网关:', gateway);
}

// 检查网关可达性
async function checkGatewayReachable() {
  const gateway = await NetworkInfo.getGatewayIPAddress();
  if (gateway) {
    console.log('网关地址:', gateway);
    console.log('可以尝试ping该地址检查连通性');
  }
}

// 显示网络拓扑
async function showNetworkTopology() {
  const [ip, subnet, gateway] = await Promise.all([
    NetworkInfo.getIPAddress(),
    NetworkInfo.getSubnet(),
    NetworkInfo.getGatewayIPAddress(),
  ]);
  
  console.log('=== 网络拓扑 ===');
  console.log('本机IP:', ip);
  console.log('子网掩码:', subnet);
  console.log('默认网关:', gateway);
}

6.8 getFrequency()

获取 WiFi 频率（单位：MHz）。

语法：

NetworkInfo.getFrequency(): Promise<number | null>

返回值：返回频率数值（MHz），如果无法获取则返回 null。

调用示例：

import { NetworkInfo } from 'react-native-network-info';

// 基本用法
async function getWiFiFrequency() {
  const frequency = await NetworkInfo.getFrequency();
  if (frequency) {
    console.log('WiFi频率:', frequency, 'MHz');
  }
}

// 判断WiFi频段
async function getWiFiBand() {
  const frequency = await NetworkInfo.getFrequency();
  
  if (frequency) {
    if (frequency >= 2400 && frequency <= 2500) {
      console.log('2.4GHz WiFi');
      return '2.4GHz';
    } else if (frequency >= 5000 && frequency <= 6000) {
      console.log('5GHz WiFi');
      return '5GHz';
    } else if (frequency >= 6000 && frequency <= 7000) {
      console.log('6GHz WiFi');
      return '6GHz';
    }
  }
  return '未知';
}

// 根据频段推荐设置
async function getWiFiRecommendation() {
  const frequency = await NetworkInfo.getFrequency();
  
  if (frequency) {
    if (frequency >= 5000) {
      console.log('5GHz/6GHz WiFi，速度快但穿墙能力弱');
    } else {
      console.log('2.4GHz WiFi，穿墙能力强但速度较慢');
    }
  }
}

---

⚠️ 七、注意事项

7.1 HarmonyOS 限制

限制项	说明
权限要求	需要 GET_WIFI_INFO 和 GET_NETWORK_INFO 权限
WiFi信息	部分信息需要连接WiFi才能获取
蜂窝网络	部分API在蜂窝网络下可能返回null

---

🔗 八、相关资源

• 官方文档
• HarmonyOS 适配仓库
• React Native 官方文档