Ciência e Engenharia de Materiais
Criar um sistema de suporte multi-linguagem em aplicações nativas de reação
Table of Contents
Criar um sistema de suporte multi-línguas em aplicações nativas de reação
Construir aplicativos móveis que suportam várias linguagens não é mais opcional – é um requisito para qualquer aplicativo que tenha como objetivo a adoção global. Reagir Nativo, com suas capacidades de plataforma cruzada, oferece várias abordagens robustas para implementar internacionalização (i18n) e localização (l10n). Este artigo fornece um guia detalhado para arquitetar um sistema de suporte multi-linguagem em Reagir Nativo, cobrindo bibliotecas, configuração, switching dinâmico, manipulação de regras complexas plural, ajustes de layout direita-esquerda (RTL) e melhores práticas de desempenho.
Conceitos Principais de Localização
A localização vai além da tradução de texto simples. Envolve a formatação de números, datas, moedas, direção de texto (LTR vs. RTL), pluralização, formas de gênero e até mesmo ajustar layouts de UI para se encaixar em strings traduzidas. Um sistema i18n bem desenhado separa conteúdo translatável de sua base de código, usa referências baseadas em chaves e suporta a mudança de idioma em tempo de execução sem exigir um reinício de aplicativo.
Principais desafios em Reagir nativo
- Módulos nativos para detecção local de dispositivos (diferenças entre iOS e Android).
- Carregar e armazenar arquivos de tradução eficientemente.
- Estado de gestão para a linguagem ativa em todo o aplicativo (incluindo navegação e preferências persistentes).
- Manuseando layouts RTL—Reagir suportes nativos mas requer alinhamento cuidadoso.
- Testando e verificando todas as strings traduzidas no contexto.
Escolher a Biblioteca I18n direita
Enquanto existem várias bibliotecas, react-i18next é a escolha mais popular e completa de recursos para React Native. Construído em cima de i18next[, ele fornece ganchos, HOCs e componentes para integração perfeita. As alternativas incluem i18n-js[] (simples, mas menos poderosas) e ]react-native-localize[[ (para detecção locale, não tradução). Para aplicações empresariais, reaja-i18next com plugins adicionais (por exemplo, i18next-browser-languagedetector adaptado para React Native) é recomendado.
Instalar as bibliotecas principais
Comece instalando os pacotes necessários:
npm install react-i18next i18next i18next-http-backend react-native-localize
Adicione opcionalmente i18next-browser-languagedetector para detecção automática de linguagem com base nas preferências do dispositivo. Observe que você pode precisar ligar módulos nativos para reaccionar-nativo-localizar (auto-linking em RN 0,60+).
Criação da instância
Criar um ficheiro de configuração, por exemplo, :
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';
const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };
const detectionOptions = {
order: ['localStorage', 'navigator'],
caches: ['localStorage'],
};
i18n
.use(initReactI18next)
.use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
.init({
resources,
fallbackLng: 'en',
interpolation: { escapeValue: false },
detection: {
// For RN, we'll override detection manually (see below)
},
});
// Detect device language at startup
const detectLanguage = () => {
const locales = RNLocalize.getLocales();
if (locales && locales.length > 0) {
const langCode = locales[0].languageCode;
const supportedLanguages = Object.keys(resources);
const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
i18n.changeLanguage(lang);
}
};
detectLanguage();
// Listen to app focus for locale changes
export default i18n;
Usando react-native-localize garante que seu aplicativo respeita as configurações regionais do dispositivo. A função é executada uma vez e define a linguagem inicial. Para atualizações contínuas (se o usuário mudar sua linguagem do dispositivo enquanto a aplicação estiver aberta), você pode se inscrever nas alterações .
Estrutura de Ficheiros de Tradução
Organize as suas traduções em ficheiros JSON aninhados por espaços de linguagem e nomes. Exemplo para :
{
"common": {
"welcome": "Welcome",
"greeting": "Hello, {{name}}!"
},
"home": {
"title": "Home Screen",
"description": "This is a multi-language React Native app."
},
"errors": {
"network": "Network error. Please try again."
}
}
Usando namespaces (por exemplo, , ) ajuda a gerenciar grandes aplicativos e permite o carregamento preguiçoso de blocos de tradução.
Usando traduções em componentes
O gancho de tradução de uso
Em qualquer componente funcional:
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t, i18n } = useTranslation('common');
return (
{t('welcome')}
{t('greeting', { name: 'John' })}
i18n.changeLanguage('es')}>
Switch to Spanish
);
};
A função t interpola variáveis e manipula plurales. Para alterar a linguagem, chame —isso desencadeia uma re-renderização de todos os componentes subscritos.
Usar o componente Trans
Para strings complexas com componentes incorporados de marcação ou Reagir:
import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user} !"
Welcome, {user} !
Manuseamento de Plurals, Gênero e Contexto
i18next suporta regras plurais avançadas fora da caixa. Defina as teclas com sufixo ou use contexto. Exemplo:
{
"item": "{{count}} item",
"item_plural": "{{count}} items",
"item_other": "{{count}} items"
}
Uso: seleciona automaticamente o formulário correto com base no locale. Gênero e outros contextos podem ser tratados através da opção .
Mudança e persistência dinâmicas da linguagem
Para persistir na preferência da linguagem do usuário, guarde a língua selecionada em AssyncStorage (ou react-native-mmkv) e carregue-a na inicialização do aplicativo. Modifique a configuração i18n:
import AsyncStorage from '@react-native-async-storage/async-storage';
const languageDetector = {
type: 'languageDetector',
async: true,
detect: async (callback) => {
const storedLang = await AsyncStorage.getItem('user-language');
callback(storedLang || 'en');
},
init: () => {},
cacheUserLanguage: async (lng) => {
await AsyncStorage.setItem('user-language', lng);
},
};
i18n.use(initReactI18next).use(languageDetector).init({
fallbackLng: 'en',
resources,
interpolation: { escapeValue: false },
});
Agora, quando o usuário muda de idioma, a preferência é salva e restaurada automaticamente no próximo lançamento.
Suporte de Direita para Esquerda (RTL)
Reagir Nativo suporta RTL através do módulo . Quando a língua é árabe, hebraico ou persa, força RTL:
import { I18nManager } from 'react-native';
const changeLanguage = async (lng) => {
await i18n.changeLanguage(lng);
const isRTL = i18n.dir(lng) === 'rtl';
I18nManager.forceRTL(isRTL);
// On Android, you may need to restart the app for full RTL effect
};
Para uma experiência completa de RTL, use e cuidadosamente. Considere usar uma biblioteca como reagir-nativo-reestilo] para a direção baseada no tema.
Carregando traduções de um servidor (sobre o ar)
Para aplicativos que precisam adicionar idiomas sem atualizações de armazenamento de aplicativos, obtenha traduções JSONs de uma infraestrutura. Use i18next-http-backend com uma infraestrutura personalizada para Reagir Nativo:
import HttpBackend from 'i18next-http-backend';
i18n.use(HttpBackend).init({
backend: {
loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
},
fallbackLng: 'en',
ns: ['common', 'home'],
defaultNS: 'common',
});
Cache as traduções obtidas no AsyncStorage para evitar solicitações repetidas. Combine com um mecanismo de versão para baixar somente arquivos atualizados.
Considerações sobre o desempenho
- [[FLT: 0]]Use a divisão de espaços de nomes: Somente carregar traduções para a tela atual. Carregar preguiçoso reduz o tamanho inicial do pacote.
- Evite re-renders: O gancho já otimiza assinando apenas as alterações de linguagem. Enrole componentes caros com .
- Arquivos de tradução pré-compilação : Durante a compilação, transforme JSON para formato miniificado.
- Para aplicações grandes, considere usar i18next-scanner para extrair automaticamente as chaves de tradução da sua base de código.
Teste de Funcionalidade Multi-Language
Escreva testes unitários para os seus arquivos de tradução: certifique-se de que não faltam chaves, que todos os placeholders são fornecidos e os plurales funcionam corretamente. Use com uma instância i18n simulada. Para testes de integração, simule os interruptores de linguagem e verifique se os componentes exibem texto correto. Também teste a renderização de layout RTL em ambas as plataformas.
Recapitulação de Melhores Práticas
- Sempre use chaves de tradução—nunca use strings de interface com o usuário.
- Mantenha as traduções organizadas por recurso ou tela (namespaces).
- Use línguas de retrocesso para evitar que traduções incompletas quebrem a interface.
- Teste em dispositivos reais com configurações de localização diferentes.
- Considere diferenças culturais além da linguagem: formatos de data, significados de cor, imagens.
- Documento do seu fluxo de trabalho i18n para tradutores e desenvolvedores.
A implementação do suporte multilíngue no React Native é um investimento gratificante. Com bibliotecas como ]react-i18next[ e react-native-localize[, você pode construir um sistema robusto que escale com a sua base de usuários. Para leitura posterior, consulte o repositório oficial react-i18next documentation[, o i18next core guide[, e o react-native-localize resource[[]. Comece pequeno, iterate, e seu aplicativo falará a linguagem do usuário – literalmente.