Desenvolvendo um aplicativo multilíngue com React Native

A localização de produtos é muito importante para empresas internacionais que estão explorando novos países e regiões. Da mesma forma, a localização é necessária para aplicativos móveis. Quando um desenvolvedor inicia uma expansão internacional, é crucial oferecer aos usuários de outros países a oportunidade de interagir com a interface em seu idioma nativo. Neste artigo, criaremos um aplicativo React Native usando o pacote react-native-localize.

A Skillbox recomenda: Curso online educacional «Profissão: Desenvolvedor Java».
Lembramos: para todos os leitores do «Habr» — desconto de 10.000 rublos na inscrição em qualquer curso Skillbox com o código promocional «Habr».

Ferramentas e habilidades

Para entender este artigo, são necessárias habilidades básicas em React Native. Para mais informações sobre a configuração do ambiente de trabalho, você pode consultar o guia oficial.

Precisaremos das seguintes versões das ferramentas de software:

• Node v10.15.0
• npm 6.4.1
• yarn 1.16.0
• react-native 0.59.9
• react-native-localize 1.1.3
• i18n-js 3.3.0

Começar

Vamos criar um aplicativo que suportará os idiomas inglês, francês e árabe. Primeiro, criamos um novo projeto usando o react-native-cli. Para isso, no terminal, você deve digitar o seguinte:

$ react-native init multiLanguage
$ cd multiLanguage

Adicionando as bibliotecas necessárias

Primeiro, precisamos instalar o react-native-localize, digitando o seguinte:
$ yarn add react-native-localize

Se houver problemas durante a instalação, é recomendável consultar o manual de instalação.

A biblioteca react-native-localize fornece ao desenvolvedor acesso a funções multilíngues. Mas ela precisa de uma outra biblioteca — i18n.

O artigo descreve o uso de I18n.js para garantir a tradução em JavaScript.

$ yarn add i18n-js

Como o i18n-js não oferece cache ou memorização, sugiro usar o lodash.memoize para isso:

$ yarn add lodash.memoize

Trabalhando com traduções

Para que o aplicativo funcione com outros idiomas, primeiro precisamos criar um diretório translations dentro de src, e depois três arquivos JSON, um 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. Ela é usada pelo aplicativo para exibir informações textuais.

O valor (value) é o texto que deve ser mostrado ao usuário.

Inglês:

{ "hello": "Hello World!"}

Francês

{ "hello": "Salut le Monde!"}

Árabe

{ "hello": "أهلاً بالعالم"}

De maneira semelhante, é possível adicionar outros idiomas.

Código principal

Nesta etapa, precisamos abrir o arquivo App.js e adicionar a importação:

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, adicionam-se funções auxiliares e constantes que serão úteis posteriormente.

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  ar: () => require("./src/translations/ar.json"),
  en: () => require("./src/translations/en.json"),
  fr: () => require("./src/translations/fr.json")
};
 
const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);
 
const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Agora vamos criar o componente da classe App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }
 
  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }
 
  componentWillUnmount() {
    RNLocalize.removeEventListener("change", this.handleLocalizationChange);
  }
 
  handleLocalizationChange = () => {
    setI18nConfig();
    this.forceUpdate();
  };
 
  render() {
    return (
      
        {translate("hello")}
      
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

O primeiro elemento — setI18nConfig() — define a configuração inicial.

Em seguida, no componentDidMount(), é preciso adicionar a escuta de eventos, este elemento irá monitorar as atualizações e chamar handleLocalizationChange() quando elas ocorrerem.

O método handleLocalizationChange() ativa setI18nConfig() e forceUpdate(). Isso é necessário para dispositivos Android, pois o componente deve ser renderizado para que as mudanças sejam perceptíveis.

Em seguida, é necessário remover a escuta no método componentWillUnmount().

Finalmente, no render(), retorna-se hello usando translate() e adicionando-o com o parâmetro key. Após essas ações, o aplicativo será capaz de "entender" qual idioma é necessário e exibir as mensagens corretamente.

Executando o aplicativo

Agora é hora de verificar como a tradução funciona.

Primeiro, execute o aplicativo no simulador ou emulador, digitando

$ react-native run-ios
$ react-native run-android

Isso deve parecer algo assim:

Agora você pode tentar mudar o idioma para o francês, iniciando o aplicativo em seguida.

Com o idioma árabe, fazemos a mesma coisa, não há diferença.

Por enquanto, está tudo indo bem.

Mas o que acontecerá se escolher um idioma aleatório que não tenha tradução no aplicativo?

A tarefa findBestLanguage se revela — fornecer a melhor tradução disponível. Como resultado, será exibido o idioma que foi configurado como padrão.

Trata-se das configurações do telefone. Por exemplo, no emulador iOS, é possível verificar a ordem dos idiomas.

Se o idioma escolhido não for o preferido, findBestAvailableLanguage retorna undefined, então é exibido o idioma que está definido como padrão.

Bônus

O react-native-localize possui uma API que fornece acesso a uma vasta gama de elementos linguísticos. Antes de começar a trabalhar, vale a pena conferir a documentação..

Como resultado, obtemos um serviço de "monitoramento como serviço", automatizado na linha de produção de integração contínua. O desenvolvedor ou testador precisa apenas definir a lista de métricas em um arquivo JSON, e tudo o mais acontece automaticamente. Obtemos um controle de qualidade transparente dos lançamentos: todas as notificações sobre desempenho, consumo de recursos ou regressões arquitetônicas.

É possível tornar o aplicativo multilíngue sem grandes problemas. O react-native-localize é uma excelente opção que permite ampliar a base de usuários do aplicativo.

O código-fonte do projeto está disponível aqui..

A Skillbox recomenda:

• Curso Prático de Dois Anos Eu sou um desenvolvedor web PRO.
• Curso online «Desenvolvedor C# do zero».
• Curso prático de um ano "Desenvolvedor PHP do zero ao PRO".

Fonte: habr.com