Internacionalização, ou i18n, é o processo de construção de aplicativos que podem se adaptar a diferentes culturas, regiões e idiomas.
A localização, ou l10n, no entanto, envolve a tradução para um local ou idioma especificado pelo usuário e é possível por meio da internacionalização.
Localizar um aplicativo significa criá-lo para oferecer suporte a vários idiomas e regiões, tornando-o acessível e utilizável por uma ampla gama de usuários.
No desenvolvimento de aplicativos para dispositivos móveis, a localização obtém o idioma e a localidade do dispositivo de um usuário-que não é o mesmo que a geolocalização de um usuário-e escreve o software para se adaptar de acordo.
Localizar um aplicativo geralmente pode ser desafiador, mas com a ajuda de expo-localization e i18n-js , aprenderemos como implementar a localização em uma Expo e React Native app.
Requisitos
Certifique-se de ter o seguinte antes de iniciar este tutorial:
- Node.js instalado em seu computador
- Watchman instalado se você estiver usando macOS
- Configuração do React Native
Além disso, além do SDK do expo-localization , podemos usar uma biblioteca como react-native-localize também. Mas, esta caixa de ferramentas oferece suporte apenas para React Native e não oferece suporte para aplicativos Expo sem ser ejetado da Expo porque é um módulo nativo.
Trabalhando com expo-localization
O SDK de expo-localization nos dá acesso aos dados de localidade do dispositivo nativo de um usuário, incluindo o isoCurrencyCodes constante, que retorna uma matriz de todos os códigos de moeda suportados no dispositivo do usuário e a timezone constante, que retorna o fuso horário do dispositivo.
Agora, vamos começar localizando um aplicativo Expo com expo-localization e i18n-js .
Criando um aplicativo Expo
Para começar, vamos gerar um aplicativo Expo usando o Expo CLI. Abra um novo terminal e execute o seguinte comando para gerar um aplicativo Expo:
expo init nome-do-seu-aplicativo
Selecione um modelo em branco. Isso nos dá as dependências mínimas de que precisamos para começar.
Para abrir o aplicativo, navegue até a raiz do nosso aplicativo recém-criado e execute o seguinte comando de acordo:
# Para iOS fios ios # ou npm run ios # Para Android yarn android # ou fio android
O comando exibe a seguinte tela:
Instalando dependências
Agora que geramos um aplicativo Expo, podemos instalar expo-localization e i18n-js como dependências após navegar no diretório do aplicativo.
Execute um dos seguintes comandos para instalar os dois pacotes:
yarn adicionar expo-localização i18n-js #ou npm i expo-localização i18n-js
Extração e centralização do texto do aplicativo
Uma etapa importante na localização de nosso aplicativo é extrair e centralizar o texto com o qual os usuários irão interagir em um arquivo separado. Isso nos permite renderizar texto condicionalmente para nossos usuários com base na localidade de seus dispositivos.
Primeiro, crie um arquivo em i18n/supportedLanguages.js ; é aqui que queremos colocar todo o texto com o qual o usuário interage que não seja um código.
Neste tutorial, nosso aplicativo oferece suporte a três idiomas: inglês, chinês e espanhol. Adicionando as seguintes linhas de código, criamos um objeto JavaScript de pares chave-valor. Cada idioma tem a mesma chave, mas os valores são diferentes:
const en={ bem-vindo:'Internacionalização e localização no React Native', signoutBtn:'Sair', signOutAlertTitle:'Cancelar', signOutAlertMess:'Tem certeza que deseja sair?', confirme:'Ok', resetBtn:'Redefinir senha',
};
const zh={ bem-vindo:'React Native 中 的 国际 化 和 本地化', signoutBtn:'登出', signOutAlertTitle:'取消', signOutAlertMess:'您 确定 要 退出 吗？', confirme:'好的', resetBtn:'重 设 密码',
};
const es={ bem-vindo:'Internacionalización y localización en React Native', signoutBtn:'desconectar', signOutAlertTitle:'Cancelar', signOutAlertMess:'¿Estás segura de que quieres cerrar sesión?', confirme:'Ok', resetBtn:'Restablecer la contraseña',
};
exportar {zh, en, es};
Posteriormente, importaremos esses diferentes idiomas para substituir a string atual pelo valor da chave que representa o texto da localidade do usuário.
Obtendo a localidade do dispositivo do usuário
O SDK expo-localization nos dá a localidade do dispositivo do usuário chamando a constante locale , que acessa o código de idioma do dispositivo.
Adicionando funcionalidade de internacionalização
Vamos importar os dois pacotes que instalamos recentemente e nosso arquivo de configuração de idioma para adicionar a funcionalidade de internacionalização:
import * as Localization from'expo-localization';
importar i18n de'i18n-js';
import {zh, en, es} de'./i18n/supportedLanguages';
Após as instruções import , adicione a seguinte linha de código:
i18n.fallbacks=true;
i18n.translations={en, zh, es};
i18n.locale=Localization.locale;
Ao especificar i18n.fallbacks=true , estamos habilitando o recurso de fallback de localidade. Isso significa, por exemplo, que se não especificarmos o texto para “Redefinir senha” em espanhol, o texto voltará ao idioma padrão.
Definir i18n.translations={en, zh, es} especifica os pares de valores-chave dos idiomas que queremos oferecer suporte em nosso aplicativo.
E, com i18n.locale=Localization.locale , estamos definindo a localidade de nosso aplicativo com base nas configurações do dispositivo de um usuário.
Localização de texto do aplicativo com i18n-js
Para obter o texto localizado no aplicativo, precisamos chamar a função i18n.t () e passar a chave que queremos traduzir como uma string.
Digamos que desejamos localizar o texto de boas-vindas de nosso aplicativo. Podemos adicionar o seguinte:
>//jsx{i18n.t ('welcome')}
Isso nos dá o valor da chave welcome em nosso objeto de configuração que importamos com base na localidade do dispositivo do usuário.
Welcome chave do dispositivo definida para inglês. 
Welcome chave do dispositivo definida para chinês. Para demonstrar a localização de um dispositivo em um simulador iOS, abra as configurações do dispositivo e navegue até Geral > Idioma e região > Idioma do iPhone . Selecione Chinês ou Espanhol para ver como o texto será processado condicionalmente de acordo com o idioma selecionado.
Em um emulador de Android iOS, abra Menu > Configuração > Idioma e teclado > Selecionar local .
Com o local selecionado, o aplicativo Expo localizado final em um simulador iOS se parece com o seguinte:
Se quisermos alterar a localidade do dispositivo sem entrar nas configurações do dispositivo, podemos alterar i18n.locale=Localization.locale para i18n.locale= 'es' para obter a versão localizada do aplicativo em espanhol ou em qualquer código de idioma compatível com o aplicativo.
Observe que isso é apenas para fins de teste.
Aplicativo nativo Bare React
Gerando um novo projeto React Native
Para começar com nosso aplicativo React Native, vamos gerar um projeto React Native usando o seguinte comando:
npx init nativo reactivo ReactNativeLocalize
Isso irá gerar um projeto React Native vazio e instalar todas as dependências necessárias.
Para abrir o aplicativo, navegue até a raiz do nosso aplicativo recém-criado e execute o seguinte comando de acordo:
# Para iniciar o Metro npx react-native start #abra um novo terminal e execute: npx react-native run-android # ou run-ios react-nativo
Vamos ver como podemos usar o SDK expo-localization junto com 18n-js em um aplicativo React Native vazio. Para começar, instale e configure o pacote react-native-unimodules com o seguinte dependências em nosso projeto React Native básico:
yarn add react-native-unimodules yarn add pod-install #ou npm install react-native-unimodules npx pod-install
Em seguida, siga estas configurações adicionais para o aplicativo para iOS e Android .
Agora, podemos instalar as dependências necessárias. Execute um dos seguintes comandos para instalar os dois pacotes:
yarn adicionar expo-localização i18n-js #ou npm i expo-localização i18n-js
Após a instalação, siga as mesmas etapas que usamos em nosso aplicativo Expo para localizar o aplicativo React Native.
Aqui está uma demonstração de trabalho de um aplicativo React Native localizado com o SDK expo-localization e 18n-js .
Conclusão
Com a internacionalização , localizamos facilmente um Expo e aplicativo React Native simples . Usando expo-localization e a biblioteca de internacionalização i18n-js , renderizamos uma versão localizada do texto de ambos os aplicativos usando o i18n.t () função.
O código completo usado neste tutorial para a Expo e a projeto nativo React está disponível no GitHub. Sinta-se à vontade para deixar um comentário e me dizer o que você achou deste artigo. Você também pode me encontrar no Twitter e no GitHub . Obrigado por ler!
A postagem Internacionalização e localização no React Native apareceu primeiro no LogRocket Blog .
