A localización do produto é moi importante para as empresas internacionais que exploran novos países e rexións. Do mesmo xeito, a localización é necesaria para as aplicacións móbiles. Se un programador comeza a súa expansión internacional, é importante ofrecer aos usuarios doutro país a oportunidade de traballar coa interface na súa lingua nativa. Neste artigo, crearemos unha aplicación React Native usando o paquete .
Skillbox recomenda: Curso educativo online .
Recordámolo: para todos os lectores de "Habr" - un desconto de 10 rublos ao inscribirse en calquera curso de Skillbox usando o código promocional "Habr".
Ferramentas e habilidades
Para entender este artigo, necesitas habilidades básicas para traballar con React Native. Para familiarizarse coa configuración da máquina de traballo, pode .
Necesitaremos estas versións de ferramentas de software:
- Nodo v10.15.0
- npm 6.4.1
- fío 1.16.0
- reaccionar-nativo 0.59.9
- reaccionar-nativo-localizar 1.1.3
- i18n-js 3.3.0
Comezando
Crearemos unha aplicación que admitirá inglés, francés e árabe. Primeiro creamos un novo proxecto usando react-native-cli. Para facelo, cómpre escribir isto no terminal:
$ react-native inicio multilingüe
$ cd multilingüe
Engadindo as bibliotecas necesarias
O primeiro paso é instalar react-native-localize escribindo o seguinte:
$ yarn add react-native-localize
Se ocorren problemas durante o proceso de instalación, .
A biblioteca react-native-localize dálle ao desenvolvedor acceso a funcións multilingües. Pero ela necesita unha biblioteca máis: i18n.
Este artigo describe o uso para proporcionar tradución a JavaScript.
$ yarn engade i18n-js
Ben, dado que i18n-js non proporciona caché nin memorización, suxiro que use lodash.memoize para iso:
$ yarn engade lodash.memoize
Traballar con traducións
Para que a aplicación poida funcionar con outros idiomas, primeiro debes crear un directorio de traducións dentro de src e despois tres ficheiros JSON para cada idioma.
1. en.json para inglés;
2. fr.json para o francés;
3. ar.json para árabe.
Estes ficheiros conteñen obxectos JSON con claves e valores. A clave será a mesma para cada lingua. É usado pola aplicación para mostrar información de texto.
O valor é o texto que se debe mostrar ao usuario.
Inglés:
{"hello": "Ola mundo!"}
Французский
{"hello": "Saúdo o mundo!"}
Árabe
{ "hola": "أهلاً بالعالم"}
Podes engadir outros idiomas do mesmo xeito.
Código principal
Neste punto, cómpre abrir o ficheiro App.js e engadirlle importacións:
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";Despois disto, engádense funcións auxiliares e constantes que serán útiles máis adiante.
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;
};Ben, agora imos crear un compoñente da clase 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(), establece a configuración inicial.
A continuación, cómpre engadir un detector de eventos a componentDidMount(), este elemento escoitará actualizacións e chamará a handleLocalizationChange() cando se produzan.
O método handleLocalizationChange() activa setI18nConfig() e forceUpdate(). Isto é necesario para os dispositivos Android xa que o compoñente debe ser representado para que os cambios sexan perceptibles.
A continuación, cómpre eliminar a escoita do método componentWillUnmount().
Finalmente, render() devolve ola usando translate() e engadindolle un parámetro clave. Despois destes pasos, a aplicación poderá "comprender" que idioma é necesario e mostrar mensaxes nel.
Lanzamento da aplicación
Agora é o momento de comprobar como funciona a tradución.
En primeiro lugar, lanzamos a aplicación no simulador ou emulador escribindo
$ react-native run-ios
$ react-native run-android
Será algo así:
Agora podes tentar cambiar o idioma ao francés iniciando a aplicación.
Facemos o mesmo co árabe, non hai diferenza.
Ata aquí todo ben.
Pero que pasa se seleccionas un idioma aleatorio para o que non hai tradución na aplicación?
Resulta que a tarefa de findBestLanguage é proporcionar a tradución óptima de todas as dispoñibles. Como resultado, mostrarase o idioma predeterminado.
Estamos a falar da configuración do teléfono. Por exemplo, no emulador de iOS podes ver a orde dos idiomas.
Se o idioma seleccionado non é o idioma preferido, findBestAvailableLanguage devolve indefinido para que se mostre o idioma predeterminado.
Bonos
react-native-localize ten unha API que proporciona acceso a un gran número de elementos da linguaxe. Antes de comezar a traballar, .
Descubrimentos
A aplicación pódese facer multilingüe sen ningún problema. React-native-localize é unha excelente opción que che permite ampliar a base de usuarios da túa aplicación.
Código fonte do proxecto .
Skillbox recomenda:
- Curso práctico de dous anos .
- Curso en liña .
- Curso práctico anual .
Fonte: www.habr.com