Internacionalização do aplicativo React Native

A chamada internacionalização refere-se a uma forma como os produtos precisam se adaptar a diferentes requisitos regionais durante o projeto, ou seja, a internacionalização exige que os aplicativos sejam projetados para serem executados em diferentes países e regiões. No desenvolvimento de aplicativos móveis, geralmente existem os dois cenários a seguir para internacionalização.

Identifique o idioma do sistema de telefonia móvel e o APP carrega automaticamente o arquivo de idioma correspondente;
Os usuários podem alternar manualmente os idiomas no APP. Nesse caso, não é necessário garantir a consistência do idioma do APP e do idioma do sistema de telefonia móvel.

Como requisito básico de software, a internacionalização é onipresente no desenvolvimento de software, especialmente no desenvolvimento de software em larga escala. No desenvolvimento de aplicativos React Native, o plugin react-native-i18n é necessário para alcançar a internacionalização.O comando de instalação é o seguinte.

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

Após a conclusão da instalação, crie um novo diretório i18n no diretório src para armazenar todos os arquivos de recursos relacionados à internacionalização, como os novos arquivos en.js e zh.js, que são usados para armazenar strings de tradução em inglês e chinês, respectivamente. pt.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影城版权所有',
};
复制代码

Em seguida, crie um novo arquivo index.js para configuração e gerenciamento de arquivos multilíngues, conforme mostrado abaixo.

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;
复制代码

Em seguida, importe o arquivo acima para a página a ser usada e, em seguida, use a função I18n.t fornecida pelo plug-in i18n-js para importar a string exibida, conforme mostrado abaixo.

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

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

Execute novamente o APP, ao alternar manualmente o ambiente de idioma do telefone celular, o APP carregará automaticamente o arquivo de idioma correspondente de acordo com o ambiente do sistema, o efeito é mostrado na Figura 4-27. insira a descrição da imagem aqui

Deve-se notar que pode haver uma reinicialização do APP no processo de troca do idioma do sistema, o que é um fenômeno normal e não precisa ser muito atento.

Internacionalização do aplicativo React Native

Acho que você gosta