---
title: i18n 配置
summary: "介绍小程序多语言 i18n 配置方式，包括在全局配置和 React 代码中使用 I18n.t 函数。"
tags: [i18n多语言配置, 多语言管理平台, I18n.t, 面板多语言适配]
questions:
  - 如何在小程序开发者平台添加多语言 key 值？
  - I18n.t 函数在全局配置和页面配置中如何使用？
  - 如何在 React 代码中使用多语言？
  - 面板小程序多语言与智能小程序多语言有什么区别？
  - I18n.t 格式中单引号和双引号写法有什么区别？
  - 产品多语言和小程序多语言的优先级关系是什么？
---

# i18n 配置

## 使用方式

多语言的 key 值需要在 [小程序开发者平台](https://iot.tuya.com/miniapp/) 中进行添加，选择对应的小程序后，点击侧边栏 **多语言管理**。


<Image
  src="https://images.tuyacn.com/content-platform/hestia/163652636681b1e7b2bfe.png"
  style={{
    borderRadius: '10px',
    width: '618px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
  }}
/>

## 多语言的应用

通过 `I18n.t` 函数方法，多语言的字段可以应用到全局配置、`React`代码中。方式分别如下：

### 1. 全局、页面配置

你可以在`global.config.ts` 或 `index.config.ts` 中使用多语言变量配置。


注意: `@I18n.t('xxx')` 的格式必须使用单引号写法。

> @ray-js/cli@1.7.63 版本后会支持 `'@I18n.t("xxx")'` 双引号格式。

```tsx
// global.config.ts
import { GlobalConfig } from '@ray-js/types'

export const tuya = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: '@I18n.t(\'miniprogram\')',
    navigationBarBackgroundColor: '#ff592a',
  },
}

const globalConfig: GlobalConfig = {
  basename: '',
}

export default globalConfig

// index.config.ts
export default {
  navigationBarTitleText: '@I18n.t(\'miniprogram\')',
}
```

### 2. `React` 代码中使用

```tsx
import React from 'react'

import { View } from '@ray-js/ray'

export default function Demo() {
  return (
    <View
      style={{
        backgroundColor: 'orange',
        padding: '20rpx',
      }}
    >
      {I18n.t('projectName')}
    </View>
  )
}
```

## 面板多语言

面板小程序多语言相比智能小程序多语言额外增加了获取产品多语言的逻辑，用于满足不同产品使用的为同一个面板小程序时，需要配置不同的多语言。

- 产品多语言优先于小程序多语言，具体逻辑参考[产品多语言相关](https://developer.tuya.com/cn/docs/iot/product-language?id=K93ixsjagr67p)
- 面板多语言使用可参考[面板 SDK 多语言使用](https://developer.tuya.com/cn/miniapp/solution-panel/ability/common/multi-language)