Escrevendo um aplicativo multilíngue em React Native
A localização de produtos é muito importante para empresas internacionais que exploram novos países e regiões. Da mesma forma, a localização é necessária para aplicações móveis. Se um desenvolvedor iniciar a expansão internacional, é importante dar aos usuários de outro país a oportunidade de trabalhar com a interface em seu idioma nativo. Neste artigo, criaremos uma aplicação React Native usando o pacote reagir-nativo-localizar.
A Skillbox recomenda: Curso educacional on-line "Profissão desenvolvedor Java". Lembramos:para todos os leitores de "Habr" - um desconto de 10 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional "Habr".
Ferramentas e habilidades
Para entender este artigo, você precisa de habilidades básicas para trabalhar com React Native. Para se familiarizar com as configurações da máquina em funcionamento, você pode use as instruções oficiais.
Precisaremos destas versões de ferramentas de software:
Nó v10.15.0
npm 6.4.1
fio 1.16.0
reagir nativo 0.59.9
reagir-nativo-localizar 1.1.3
i18n-js 3.3.0
Начинаем
Criaremos um aplicativo que suportará inglês, francês e árabe. Primeiro criamos um novo projeto usando react-native-cli. Para fazer isso, você precisa digitar isto no terminal:
$ react-native init multilíngue
$ cd multilíngue
Adicionando as bibliotecas necessárias
A primeira etapa é instalar o react-native-localize digitando o seguinte:
$ yarn add react-nativo-localize
A biblioteca react-native-localize dá ao desenvolvedor acesso a recursos multilíngues. Mas ela precisa de mais uma biblioteca - i18n.
Este artigo descreve o uso I18n.js para fornecer tradução para JavaScript.
$ fio adicionar i18n-js
Bem, como o i18n-js não fornece cache ou memoização, sugiro usar lodash.memoize para isso:
$ fio adicionar lodash.memoize
Trabalhando com traduções
Para que o aplicativo possa trabalhar com outros idiomas, primeiro você precisa criar um diretório de traduções dentro do src e, em seguida, três arquivos JSON para cada idioma.
1. en.json para inglês;
2. fr.json para francês;
3. ar.json para árabe.
Esses arquivos contêm objetos JSON com chaves e valores. A chave será a mesma para cada idioma. É usado pelo aplicativo para exibir informações de texto.
Valor é o texto que precisa ser mostrado ao usuário.
Inglês:
{"olá": "Olá mundo!"}
francês
{"olá": "Salut le Monde!"}
Árabe
{ "olá": "أهلاً بالعالم"}
Você pode adicionar outros idiomas da mesma maneira.
Código principal
Neste ponto, você precisa abrir o arquivo App.js e adicionar importações a ele:
import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance
import {
I18nManager,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
View
} from "react-native";
Depois disso, são adicionadas funções auxiliares e constantes que serão úteis posteriormente.
O primeiro elemento, setI18nConfig(), define a configuração inicial.
Então você precisa adicionar um ouvinte de evento a componentDidMount(), este elemento irá escutar atualizações e chamar handleLocalizationChange() quando elas acontecerem.
O método handleLocalizationChange() ativa setI18nConfig() e forceUpdate(). Isso é necessário para dispositivos Android, pois o componente deve ser renderizado para que as alterações sejam perceptíveis.
Então você precisa remover a escuta do método componentWillUnmount().
Finalmente, render() retorna hello usando translate() e adicionando um parâmetro chave a ele. Após essas etapas, o aplicativo será capaz de “entender” qual idioma é necessário e exibir mensagens nele.
Lançamento de aplicativos
Agora é a hora de verificar como funciona a tradução.
Primeiro, iniciamos o aplicativo no simulador ou emulador digitando
$ run-ios react-nativo
$ react-nativo run-android
Vai parecer algo assim:
Agora você pode tentar alterar o idioma para francês iniciando o aplicativo.
Fazemos a mesma coisa com o árabe, não há diferença.
Até agora tudo bem.
Mas o que acontece se você selecionar um idioma aleatório para o qual não há tradução no aplicativo?
Acontece que a tarefa do findBestLanguage é fornecer a tradução ideal entre todas as disponíveis. Como resultado, o idioma padrão será exibido.
Estamos falando sobre configurações do telefone. Por exemplo, no emulador iOS você pode ver a ordem dos idiomas.
Se o idioma selecionado não for o idioma preferencial, findBestAvailableLanguage retornará indefinido para que o idioma padrão seja mostrado.
bônus
react-native-localize possui uma API que fornece acesso a um grande número de elementos de linguagem. Antes de começar a trabalhar, Vale a pena conferir a documentação.
Descobertas
O aplicativo pode ser multilíngue sem problemas. React-native-localize é uma ótima opção que permite expandir a base de usuários do seu aplicativo.