@react-native-ohos/react-native-localize
v3.6.3
Published
A toolbox for your React Native app localization.
Readme
模板版本：v0.4.2
本项目基于 react-native-localize 开发。
该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-localize 版本所属关系如下：
| 三方库名称 | 三方库版本（npm地址） | 发布信息 | 支持RN版本 | Autolink | 编译API版本 | 社区基线版本 | 源码地址 | | ------------ | ------------ |------------------------------ |------------- | ------------- |------------------------ | ------------- | ------------- | | @react-native-ohos/react-native-localize | ~ 3.6.3（开发中） | Gitcode Releases | 0.82.* | Yes | API12+ | 3.6.1 | br_rnoh0.82 | | @react-native-ohos/react-native-localize | ~ 3.6.2 | Gitcode Releases | 0.82.* | No | API12+ | 3.6.1 | br_rnoh0.82 |
简介
react-native-localize 是一个用于 React Native 的本地化工具库。
它提供读取设备语言、地区、时区、货币等系统本地化信息的 API，帮助应用快速适配多语言与区域设置。
下载安装
进入到工程目录并输入以下命令：
npm
npm install @react-native-ohos/react-native-localizeyarn
yarn add @react-native-ohos/react-native-localize下面的代码展示了这个库的基本使用场景：
[!WARNING] 使用时 import 的库名不变。
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;使用 Codegen
Version > @react-native-ohos/[email protected]，已适配codegen-lib生成桥接代码。
本库已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 Codegen 使用文档。
Link
| | 是否支持autolink | RN框架版本 | |--------------------------------------|-----------------|------------| | ~3.6.3 | Yes | 0.82 | | ~3.6.2 | No | 0.82 |
使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md
如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。
首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony。
1.在工程根目录的 oh-package.json5 添加 overrides 字段
{
...
"overrides": {
"@rnoh/react-native-openharmony" : "./react_native_openharmony"
}
}2.引入原生端代码
目前有两种方法：
- 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
- 直接链接源码。
方法一：通过 har 包引入（推荐）
[!TIP] har 包位于三方库安装路径的
harmony文件夹下。
打开 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方法二：直接链接源码
[!TIP] 如需使用直接链接源码，请参考直接链接源码说明
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然后编译、运行即可。
约束与限制
无
兼容性
在以下版本验证通过：
- RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0 Release; ROM:6.0.0.858;
API
[!TIP] "Platform"列表示该属性在原三方库上支持的平台。
[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
[!TIP] 5.1.0 (18)开始，支持getTemperatureUnit接口。
| 名称 | 描述 | 参数类型 | 返回值 | 必填 | 平台 | 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 | ReactNode | No | Web | No |
| useLocalize() | 返回本地化相关的 API 集合 | function | LocalizeApi | No | All | Yes |
遗留问题
- [x] 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 端模块实现
│ ├─ expo.ts # Expo 配置插件
│ ├─ utils.ts # 工具函数
│ ├─ constants.ts # 常量定义
│ ├─ types.ts # 类型定义
│ └─ specs/ # TurboModule 类型定义
├── README_en.md # 英文文档
├── README.md # 中文文档
贡献代码
使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR。
开源协议
本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。