文档模板：v0.4.2

react-native-localize

本项目基于 react-native-localize 开发。

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

简介

react-native-localize 提供一套本地化工具 API，用于读取设备语言、地区、货币、时区、数字格式等偏好设置，帮助应用做语言匹配与本地化展示。

下载安装

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

npm

npm install @react-native-ohos/react-native-localize

yarn

yarn add @react-native-ohos/react-native-localize

使用示例

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

import * as React from "react";
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from "react-native";
import * as RNLocalize from "react-native-localize";

const Line = ({ name, value }: { name: string; value: unknown }) => (
  <View style={{ marginBottom: 16 }}>
    <Text style={{ textDecorationLine: "underline", fontWeight: "500" }}>{name}</Text>
    <Text>{JSON.stringify(value, null, 2)}</Text>
  </View>
);

export default function LocalizeDemo() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Line name="RNLocalize.getLocales()" value={RNLocalize.getLocales()} />
        <Line name="RNLocalize.getCurrencies()" value={RNLocalize.getCurrencies()} />
        <Line name="RNLocalize.getCountry()" value={RNLocalize.getCountry()} />
        <Line name="RNLocalize.getCalendar()" value={RNLocalize.getCalendar()} />
        <Line name="RNLocalize.getTimeZone()" value={RNLocalize.getTimeZone()} />
        <Line name="RNLocalize.uses24HourClock()" value={RNLocalize.uses24HourClock()} />
        <Line
          name="RNLocalize.findBestLanguageTag(['en-US', 'en', 'fr', 'zh'])"
          value={RNLocalize.findBestLanguageTag(["en-US", "en", "fr", "zh"])}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

链接

使用 Autolink 的工程需要根据 Autolink 框架指导文档 进行配置。

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

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

"dependencies": {
    "@react-native-ohos/react-native-localize": "file:../../node_modules/@react-native-ohos/react-native-localize/harmony/rn_localize.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(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
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("${OH_MODULES}/@react-native-ohos/react-native-localize/src/main/cpp" ./rn_localize)
# 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 rnoh_localize)
# RNOH_END: manual_package_linking_2

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

using namespace rnoh;

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

  ...
+ import { RNLocalizePackage } from '@react-native-ohos/react-native-localize/ts';

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

运行

点击右上角的 sync 按钮

或者在命令行终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

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

1. RNOH: 0.84.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;
2. RNOH:0.86.1; SDK: HarmonyOS 26.0.0 Release SDK; IDE: DevEco Studio 26.0.0 Release; ROM:7.0.0.100 SP9;

权限要求

无额外系统权限要求。

编译运行 API 要求

API

遗留问题

• HarmonyOS 侧无法获取温度及长度单位issue#2
• SSR（Web 端专属）相关特性（ServerLanguagesProvider/useLocalize 的 SSR 逻辑）暂不支持鸿蒙系统issue#13
• react-native-localize 的 Expo 配置插件暂不支持鸿蒙系统，鸿蒙系统未集成 Expo 的构建/配置体系issue#14
• HarmonyOS 侧 getNumberFormatSettings() 接口暂无直接读取数字格式设置的系统 API，当前通过信息间接推断其返回值issue#27

其他

无

目录结构

/rntpc_react-native-localize  # 项目根目录
├── harmony              # 鸿蒙适配代码
│    ├─ rn_localize.har          # har 包
│    └─ rn_localize              # 鸿蒙适配核心代码
│          ├─ index.ets          # 鸿蒙适配代码入口
│          ├─ ts.ets             # ArkTS 导出入口
│          └─ src/main
│              ├─ cpp/                   # C++ 原生模块
│              └─ ets/
│                  ├─ RNLocalizeModule.ts   # 核心模块实现
│                  ├─ RNLocalizePackage.ets # Package 注册
│                  ├─ Logger.ts             # 日志工具
│                  ├─ config/               # 配置数据
│                  └─ generated/            # Codegen 生成代码
├── src                  # RN 代码
│    ├─ index.ts                 # 入口文件
│    ├─ module.ts                # 模块实现
│    ├─ module.native.ts         # Native 端模块实现
│    ├─ extras/                  # 扩展功能
│    │    ├─ expo.ts             # Expo 配置插件
│    ├─ utils.ts                 # 工具函数
│    ├─ constants.ts             # 常量定义
│    ├─ types.ts                 # 类型定义
│    └─ specs/                   # TurboModule 类型定义
├── README_en.md           # 英文文档
├── README.md              # 中文文档

贡献代码

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

开源协议

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