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

Se ocorrerem problemas durante o processo de instalação, Vale a pena ler o manual de instalação.

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.

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;
};

Bom, agora vamos criar um 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 (
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.value}>{translate("hello")}</Text>
      </SafeAreaView>
    );
  }
}
 
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.

Então você precisa adicionar um ouvinte de evento a componentDidMount(), este elemento irá escutar atualizações e chamar handleLocalizationChange() quando elas acontecerem.

Метод handleLocalizationChange() активизирует setI18nConfig() и forceUpdate(). Это необходимо для устройств на Android, так как компонент должен быть отрендерен, чтобы изменения стали заметными.

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.

Código fonte do projeto localizado aqui.

A Skillbox recomenda:

• Curso prático de dois anos "Eu sou um desenvolvedor web PRO".
• Curso online "Desenvolvedor C# do zero".
• curso de ano prático "Desenvolvedor PHP do 0 ao PRO".

Fonte: habr.com