# ReactNativeLanguageChange

**Repository Path**: scenario-samples/react-native-language-change

## Basic Information

- **Project Name**: ReactNativeLanguageChange
- **Description**: 在应用开发中，有时会需要跟随系统语言。
本示例使用react-native-localize 获取系统语言。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RN页面跟随系统语言切换示例

## 场景介绍

在应用开发中，有时会需要跟随系统语言。  
本示例使用[react-native-localize](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-localize.md)
获取系统语言。

## 效果预览

<img src="screenshots/languageChange.gif" width="200">

## 实现思路

1. Dimensions监听change变化。

```
useEffect(() => {
    Dimensions.addEventListener('change', () => {
      setLan(getLocales()[0].languageCode);
    });
}, []);
```

2. 通过getLocales获取系统语言

```
getLocales()[0].languageCode
```
## 说明

- RN工程目录下执行`npm i`命令安装依赖。
- 用DevEco Studio打开harmony工程。
- RN工程目录下执行`npm run dev`命令生成bundle。

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。
- 本示例使用0.72.96版本RNOH

## 工程目录

```
ReactNativeLanguageChange                        // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──entrybackupability
│  │  │  └──EntryBackupAbility.ets
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
├──App.tsx                                       // 截图保存图库实现
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```

## 参考文档
[react-native-localize](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-localize.md)  
[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md)