文档模板：v0.4.2

react-native-device-info

本项目基于 react-native-device-info 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-device-info 版本所属关系如下：

简介

react-native-device-info 是一个用于 React Native 应用的专业设备信息库，支持获取详细的设备、系统和应用信息。

下载安装

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-device-info

yarn

yarn add @react-native-ohos/react-native-device-info

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  "overrides": {
    "@rnoh/react-native-openharmony": "^0.82.25" // ohpm 在线版本
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
    // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
  }
}

"dependencies": {
    "@react-native-ohos/react-native-device-info": "file:../../node_modules/@react-native-ohos/react-native-device-info/harmony/device_info.har"
  }

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(REACT_NATIVE_DEVICE_INFO_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-device-info/src/main/cpp")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${REACT_NATIVE_DEVICE_INFO_CPP_DIR}" ./device_info)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC device_info)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "RNDeviceInfoPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<RNDeviceInfoPackage>(ctx),
    };
}

  ...
+ import {RNDeviceInfoPackage} from '@react-native-ohos/react-native-device-info/ts';

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

运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.82.25; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;
2. RNOH: 0.84.30; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

权限要求

"ohos.permission.DISTRIBUTED_DATASYNC" 权限用于getDeviceName接口，

"ohos.permission.GET_WIFI_INFO" 权限用于getMacAddress/getMacAddressSync接口，

"ohos.permission.GET_NETWORK_INFO" 接口用于getIpAddress/getIpAddressSync

打开 entry/src/main/module.json5，添加：

...
"requestPermissions": [
  {
    "name": "ohos.permission.GET_NETWORK_INFO"
  },
  {
    "name": "ohos.permission.GET_WIFI_INFO"
  },
  {
    "name": "ohos.permission.DISTRIBUTED_DATASYNC",
    "reason": "$string:DATA_SYNC",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when": "always"
    }
  }
]

使用示例

下面的代码展示了这个库的基本使用场景：

import React from "react";
import { View, Text } from "react-native";
import DeviceInfo from "react-native-device-info";

const App = () => {
  const model = DeviceInfo.getModel(); 
  const bundleId = DeviceInfo.getBundleId();

  return (
    <View style={{ flex: 1 }}>
      <Text>Model: {model}</Text>
      <Text>Bundle ID: {bundleId}</Text>
    </View>
  );
};

export default App;

[!注意事项] 如果调用 getFontScale接口，需要进行以下配置。

1. harmony/AppScope/resources/base/profile文件夹下面新增configuration.json文件，内容如下：

{
  "configuration": {
    "fontSizeScale": "followSystem",
    "fontSizeMaxScale": "3.2"
  }
}

2.在harmony/AppScope/app.json5 文件中配置 "configuration": "$profile:configuration" 如下：
{
  "app": {
    "bundleName": "com.example.test",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name",
    "distributedNotificationEnabled": true,
  + "configuration": "$profile:configuration"
  }
}

使用说明

基本用法

import DeviceInfo from 'react-native-device-info';
import {getManufacturer, getManufacturerSync} from 'react-native-device-info';

// 异步获取（Promise）
DeviceInfo.getManufacturer().then((manufacturer) => {
  console.log('manufacturer:', manufacturer);
});

// 同步获取
const mac = DeviceInfo.getMacAddressSync();
const manufacturer = getManufacturerSync();

Hooks 用法

import React from 'react';
import {
  useBatteryLevel,
  useDeviceName,
  useManufacturer,
  usePowerState,
} from 'react-native-device-info';

const App = () => {
  const batteryLevel = useBatteryLevel();   // 电池电量
  const deviceName = useDeviceName();       // 设备名称
  const manufacturer = useManufacturer();   // 制造商
  const powerState = usePowerState();       // 电源状态
  return (
    <Text>
      电量：{batteryLevel}  设备：{deviceName}
    </Text>
  );
};

事件监听

import React from 'react';
import { useIsHeadphonesConnected,  useIsWiredHeadphonesConnected } from 'react-native-device-info';

const App = () => {
  // 监听耳机连接状态变化，状态改变时组件会自动更新
  const isHeadphonesConnected = useIsHeadphonesConnected();       // 任意耳机（蓝牙/有线）
  const isWiredHeadphonesConnected = useIsWiredHeadphonesConnected(); // 有线耳机
  return <Text>{isHeadphonesConnected ? '耳机已连接' : '耳机未连接'}</Text>;
};

接口说明

API

AppSetIdInfo： 获取应用集ID接口返回的数据类型

属性

DeviceType 类型值列表

BatteryState 类型值列表

遗留问题

• getDeviceId()接口harmony暂不支持issue#79
• getDeviceToken()接口harmony暂不支持issue#80
• getFreeDiskStorage()接口harmony暂不支持 issue#81
• getFreeDiskStorageOld()接口harmony暂不支持 issue#82
• getInstallReferrer()接口harmony暂不支持 issue#83
• getMaxMemory()接口harmony暂不支持 issue#84
• getSerialNumber()接口harmony暂不支持 issue#85
• getTags()接口harmony暂不支持 issue#86
• getTagsSync()接口harmony暂不支持 issue#47
• getTotalDiskCapacity()接口harmony暂不支持 issue#87
• getTotalDiskCapacityOld()接口harmony暂不支持 issue#88
• getTotalMemory()接口harmony暂不支持 issue#89
• getUniqueId()接口harmony暂不支持 issue#90
• syncUniqueId()接口harmony暂不支持 issue#91
• getUserAgent()接口harmony暂不支持 issue#92
• getUserAgentSync()接口harmony暂不支持 issue#93
• hasNotch()接口harmony暂不支持 issue#94
• hasDynamicIsland()接口harmony暂不支持 issue#95
• hasSystemFeature()接口harmony暂不支持 issue#96
• isEmulator()接口harmony暂不支持 issue#97
• isDisplayZoomed()接口harmony暂不支持 issue#98
• getBrightness()接口harmony暂不支持 issue#99
• isAirplaneMode()接口harmony暂不支持 issue#100
• isAirplaneModeSync()接口harmony暂不支持 issue#48
• getFreeDiskStorageOldSync()接口harmony暂不支持 issue#61
• getTotalDiskCapacityOldSync()接口harmony暂不支持 issue#62
• getUniqueIdSync()接口harmony暂不支持 issue#63
• isKeyboardConnectedSync ()接口harmony暂不支持 issue#64
• isMouseConnectedSync()接口harmony暂不支持 issue#65
• getSupportedMediaTypeListSync()接口harmony暂不支持 issue#66
• useHasSystemFeature ()接口harmony暂不支持 issue#67
• useIsEmulator ()接口harmony暂不支持 issue#68
• getHostNames ()接口harmony暂不支持 issue#69
• getHostNamesSync ()接口harmony暂不支持 issue#70

其他

无

目录结构

/rntpc_react-native-device-info  # 项目根目录
├── harmony                     # 鸿蒙适配代码
│    └─ device_info.har         # har包
│    └─ device_info             # 鸿蒙适配核心代码
│          └─ index.ets         # 鸿蒙适配代码入口
│          └─ src/main/ets
│              └─ RNDeviceInfoModule.ts  # 设备信息原生模块
│              └─ RNDeviceInfoPackage.ts # 包注册
├── src                         # RN代码
│    └─ index.ts                # 入口文件
│    └─ RNDeviceInfo.ts         # 设备信息主逻辑
│    └─ NativeRNDeviceInfo.ts   # 原生模块类型定义
│    └─ internal/               # 内部工具函数
├── example                     # 示例项目
├── README.md                   # 中文安装使用方法
├── README_en.md                # 英文README

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。