#Internationalization Configuration

#Usage

To manage the code and value of each multilingual option, log in to the Tuya MiniApp Developer Platform, select the target miniapp, and then go to Multilingual.

#Application of Internationalization

Using the I18n.t function method, internationalization fields can be applied to global configuration and React code. The methods are as follows:

#1. Global and Page Configuration

You can use internationalization variables in global.config.ts or index.config.ts configuration files.

Note: '@I18n.t('xxx')' must be written in single quotes,

@ray-js/cli@1.7.63 after version will support '@i18n.t("xxx")' double quotation marks format.

// 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. Use in React Code

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>
  )
}

#Panel Multilingual

Panel MiniApp multilingual is an additional logic for obtaining product multilingual, which is used to meet the needs of different products using the same panel MiniApp.

#Multilingual Panel

Internationalization is essential for developing panel miniapps. The multilingual module of a panel miniapp allows for requesting the specific multilingual settings for a product.

• Product multilingualism takes precedence over mini-program multilingualism. For specific logic, refer to product multilingual.
• Panel multilingualism can be referenced Panel SDK multilingual usage