Internacionalización de la aplicación React Native

La llamada internacionalización se refiere a la forma en que los productos deben adaptarse a los diferentes requisitos regionales durante el diseño. En otras palabras, la internacionalización requiere que las aplicaciones se diseñen para ejecutarse en diferentes países y regiones. Haga un cambio de idioma. En el desarrollo de aplicaciones móviles, generalmente existen los siguientes dos escenarios para la internacionalización.

Identifique el idioma del sistema de telefonía móvil y la aplicación carga automáticamente el archivo de idioma correspondiente;
Los usuarios pueden cambiar manualmente los idiomas en la aplicación. En este caso, no es necesario garantizar la consistencia del idioma de la aplicación y el idioma del sistema del teléfono móvil.

Como requisito básico del software, la internacionalización es omnipresente en el desarrollo de software, especialmente en el desarrollo de software a gran escala. En el desarrollo de aplicaciones React Native, se necesita el complemento react-native-i18n para lograr la internacionalización.El comando de instalación es el siguiente.

npm install react-native-i18n --save
复制代码

Una vez completada la instalación, cree un nuevo directorio i18n en el directorio src para almacenar todos los archivos de recursos relacionados con la internacionalización, como los nuevos archivos en.js y zh.js, que se utilizan para almacenar cadenas de traducción en inglés y chino, respectivamente. es.js:

export default {
  official: 'Official WebSite',
  cgvLink: 'www.cgv.com.cn',
  cgv: 'CGV Official',
  wechat: 'Wechat',
  weibo: 'WeiBo',
  update: 'Check UpDate',
  userAgree: 'User Agree',
  userPrivacy: 'User Privacy',
  copy: 'Copyright © 2022 CGVCineplex All Rights Reserved',
};
复制代码

zh.js

export default {
  official: '官方网站',
  cgvLink: 'www.cgv.com.cn',
  cgv: 'CGV电影',
  wechat: '微信',
  weibo: '微博',
  update: '检查新版本',
  userAgree: '用户协议',
  userPrivacy: '用户隐私制度',
  copy: 'Copyright © 2022 CGV影城版权所有',
};
复制代码

A continuación, cree un nuevo archivo index.js para la configuración y administración de archivos multilingües, como se muestra a continuación.

import I18n from 'i18n-js';
import * as RNLocalize from 'react-native-localize';
import zh from './zh';
import en from './en';

const locales = RNLocalize.getLocales();
const systemLanguage = locales[0]?.languageCode;  

if (systemLanguage) {
    I18n.locale = systemLanguage;
} else {
    I18n.locale = 'en'; // 默认语言为英文
}

I18n.fallbacks = true;
I18n.translations = {
    zh,
    en,
};

export function strings(name, params = {}) {
    return I18n.t(name, params);
}

export default I18n;
复制代码

A continuación, importe el archivo anterior a la página que se usará y luego use la función I18n.t proporcionada por el complemento i18n-js para importar la cadena mostrada, como se muestra a continuación.

import {strings} from '../../i18n'

<Text>{strings('copy')}</Text>
复制代码

Vuelva a ejecutar la APLICACIÓN, cuando cambie manualmente el entorno de idioma del teléfono móvil, la APLICACIÓN cargará automáticamente el archivo de idioma correspondiente de acuerdo con el entorno del sistema, el efecto se muestra en la Figura 4-27. inserte la descripción de la imagen aquí

Cabe señalar que puede haber un reinicio de la aplicación en el proceso de cambio de idioma del sistema, lo cual es un fenómeno normal y no se debe prestar mucha atención.

Internacionalización de la aplicación React Native

Supongo que te gusta