模板版本：v0.4.2

react-native-localize

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

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

三方库名称	三方库版本（npm地址）	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	源码地址
@react-native-ohos/react-native-localize	~ 3.4.2	Gitcode Releases	0.77.*	否	API12+	3.4.1	br_rnoh0.77

简介

react-native-localize 是一个用于 React Native 的本地化工具库。
它提供读取设备语言、地区、时区、货币等系统本地化信息的 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 {
  I18nManager,
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from "react-native";
import * as RNLocalize from "react-native-localize";

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
  },
  container: {
    padding: 16,
    alignItems: "flex-start",
  },
  block: {
    marginBottom: 16,
    alignItems: "flex-start",
  },
  name: {
    textDecorationLine: "underline",
    fontWeight: "500",
    marginBottom: 8,
    color: "black",
  },
  value: {
    textAlign: "left",
    color: "black",
  },
});

const Line = ({ name, value }: { name: string; value: unknown }) => (
  <View style={styles.block}>
    <Text style={styles.name}>{name}</Text>
    <Text style={styles.value}>{JSON.stringify(value, null, 2)}</Text>
  </View>
);
function LocalizeDemo() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.container}>
        <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>
  );
}
export default LocalizeDemo;

Link

	是否支持autolink	RN框架版本
~3.4.2	No	0.77

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

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。

1.在工程根目录的 oh-package.json5 添加 overrides 字段

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

2.引入原生端代码

目前有两种方法：

1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
2. 直接链接源码。

方法一：通过 har 包引入（推荐）

打开 entry/oh-package.json5，添加以下依赖

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-localize": "file:../../node_modules/@react-native-ohos/react-native-localize/harmony/rn_localize.har"
  }

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

方法二：直接链接源码

3. 配置 CMakeLists 和引入 RNLocalizePackage

...

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")

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

# RNOH_END: 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

add_library(rnoh_app SHARED
    "./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_BEGIN: manual_package_linking_2

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

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

using namespace rnoh;

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

4.在 ArkTs 侧引入 RNLocalizePackage

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

  ...
+ 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.77.1;SDK:HarmonyOS 5.1.1.208 (API Version 19 Release) ;IDE:DevEco Studio:5.1.1.830; ROM: HarmonyOS 6.0.0.112 SP12;

API

名称	描述	参数类型	返回值	必填	平台	OpenHarmony平台支持
getLocales()	返回用户首选的语言环境，按顺序排列。	function	Locale[]	No	All	Yes
getNumberFormatSettings()	返回数字格式设置。	function	NumberFormatSettings	No	All	Yes
getCurrencies()	返回用户首选的货币代码，按顺序排列。	function	string[]	No	All	Yes
getCountry()	返回用户当前的国家代码（基于设备语言环境，而不是位置）。	function	string	No	All	Yes
getCalendar()	返回用户首选的日历格式。	function	Calendar	No	All	Yes
getTemperatureUnit()	返回用户首选的温度单位。	function	TemperatureUnit	No	All	Yes
getTimeZone()	返回用户首选的时区（基于设备设置，而不是位置）。	function	string	No	All	Yes
uses24HourClock()	如果用户喜欢24小时制则返回true，否则返回false。	function	boolean	No	All	Yes
usesMetricSystem()	如果用户喜欢公制单位则返回true，否则返回false。	function	boolean	No	All	Yes
usesAutoDateAndTime()	告诉手机是否启用了自动日期和时间设置。仅限Android	function	boolean | undefined	No	Android	No
usesAutoTimeZone()	告诉手机是否启用了自动时区设置。仅限Android	function	boolean | undefined	No	Android	No
findBestLanguageTag()	返回最佳的语言标签及其阅读方向	function	{ languageTag: string, isRTL: boolean } | undefined	No	All	Yes
openAppLanguageSettings	打开应用语言设置	function	Promise<void>	No	Android	Yes
ServerLanguagesProvider()	服务端语言配置提供者组件，用于在服务端渲染场景下注入语言列表	function	/	No	Web	No
useLocalize()	返回本地化相关的 API 集合	function	/	No	All	No

遗留问题

• 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  # 项目根目录
├── example              # 示例工程
│    ├─ src/                     # 示例 RN 代码
│    └─ harmony/                 # 示例 HarmonyOS 工程
├── harmony              # 鸿蒙适配代码
│    ├─ rn_localize.har          # har 包
│    └─ rn_localize              # 鸿蒙适配核心代码
│          ├─ index.ets          # 鸿蒙适配代码入口
│          ├─ ts.ts              # ArkTS 导出入口
│          └─ src/main
│              ├─ cpp/                   # C++ 原生模块
│              └─ ets/
│                  ├─ RNLocalizeModule.ts   # 核心模块实现
│                  ├─ RNLocalizePackage.ts  # Package 注册
│                  ├─ Logger.ts             # 日志工具
│                  ├─ config/               # 配置数据
│                  └─ generated/            # Codegen 生成代码
├── mock                # mock 模块
│    └─ index.ts                 # mock 入口
├── src                  # RN 代码
│    ├─ index.ts                 # 入口文件
│    ├─ module.ts                # 模块实现
│    ├─ module.web.ts            # Web 端模块实现
│    ├─ NativeRNLocalize.ts      # Native 端 TurboModule 类型定义
│    ├─ constants.ts             # 常量定义
│    └─ types.ts                 # 类型定义
├── README_en.md           # 英文文档
└── README.md              # 中文文档

贡献代码

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

开源协议

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