La localización de productos es muy importante para las empresas internacionales que desarrollan nuevos países y regiones. Del mismo modo, la localización es necesaria para las aplicaciones móviles. Si un desarrollador inicia la expansión internacional, es importante brindar a los usuarios de otro país la oportunidad de trabajar con la interfaz en su idioma nativo. En este artículo, crearemos una aplicación React Native usando el paquete .
Skillbox recomienda: Curso educativo en línea .
Recordamos: para todos los lectores de "Habr": un descuento de 10 rublos al inscribirse en cualquier curso de Skillbox utilizando el código promocional "Habr".
herramientas y habilidades
Comprender este artículo requiere habilidades básicas de React Native. Para familiarizarse con la configuración de la máquina de trabajo, puede .
Necesitamos estas versiones de herramientas de software:
- Nodo v10.15.0
- NPM 6.4.1
- hilo 1.16.0
- reaccionar nativo 0.59.9
- reaccionar-nativo-localizar 1.1.3
- i18n-js 3.3.0
Начинаем
Crearemos una aplicación que admita inglés, francés y árabe. Primero creamos un nuevo proyecto usando react-native-cli. Para hacer esto, en la terminal necesitas escribir esto:
$ react-native init multilenguaje
$ cd multilenguaje
Adición de las bibliotecas necesarias
El primer paso es instalar react-native-localize escribiendo lo siguiente:
$ hilado agregar reaccionar-nativo-localizar
Si encuentra problemas durante el proceso de instalación, .
La biblioteca react-native-localize brinda al desarrollador acceso a funciones multilingües. Pero necesita otra biblioteca: i18n.
El artículo describe el uso para proporcionar traducción en JavaScript.
$ hilo añadir i18n-js
Bueno, dado que i18n-js no proporciona almacenamiento en caché ni memoización, sugiero usar lodash.memoize para esto:
$ hilo agregar lodash.memoize
Trabajar con traducciones
Para que la aplicación funcione con otros idiomas, primero debe crear un directorio de traducciones dentro de src, luego tres archivos JSON para cada uno de los idiomas.
1. en.json para inglés;
2. fr.json para francés;
3. ar.json para árabe.
Estos archivos contienen objetos JSON con claves y valores. La clave será la misma para cada idioma. La aplicación lo utiliza para mostrar información textual.
Valor (valor) es el texto que debe mostrarse al usuario.
Inglés:
{ "hola": "¡Hola mundo!"}
Francés
{ "hola": "¡Salut le Monde!"}
Árabe
{ "hola": "أهلاً بالعالم"}
Se pueden agregar otros idiomas de la misma manera.
Código principal
En este punto, debe abrir el archivo App.js y agregarle importaciones:
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";Después de eso, se agregan funciones auxiliares y constantes, que serán útiles más adelante.
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;
};Bueno, ahora vamos a crear un componente de la 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
}
});El primer elemento, setI18nConfig(), establece la configuración inicial.
Luego, debemos agregar un detector de eventos a componentDidMount() , este elemento escuchará las actualizaciones y llamará a handleLocalizationChange() cuando ocurran.
El método handleLocalizationChange() invoca setI18nConfig() y forceUpdate(). Esto es necesario para los dispositivos Android, ya que el componente debe renderizarse para que los cambios sean visibles.
Luego, debemos eliminar el oyente del método componentWillUnmount().
Finalmente, hello se devuelve en render() usando translate() y agregándole un parámetro clave. Después de estos pasos, la aplicación podrá "comprender" qué idioma se necesita y mostrar mensajes en él.
Lanzamiento de la aplicación
Ahora es el momento de comprobar cómo funciona la traducción.
Primero ejecutamos la aplicación en el simulador o emulador escribiendo
$ react-nativo run-ios
$ reaccionar-nativo ejecutar-android
Se verá algo como esto:
Ahora puede intentar cambiar el idioma a francés iniciando la aplicación.
Hacemos lo mismo con el idioma árabe, no hay diferencia.
Hasta ahora todo va bien.
Pero, ¿qué sucede si selecciona un idioma aleatorio que no tiene traducción en la aplicación?
Resulta que la tarea de findBestLanguage es proporcionar la mejor traducción posible entre todas las disponibles. Como resultado, se mostrará el idioma que se configuró de forma predeterminada.
Se trata de la configuración del teléfono. Entonces, por ejemplo, en el emulador de iOS, puede ver el orden de los idiomas.
Si el idioma seleccionado no es el idioma preferido, findBestAvailableLanguage devuelve undefined para que se muestre el idioma predeterminado.
Prima
react-native-localize tiene una API que brinda acceso a una gran cantidad de elementos del idioma. Antes de empezar a trabajar, .
Hallazgos
La aplicación se puede hacer multilingüe sin ningún problema. React-native-localize es una excelente opción que le permite ampliar el rango de usuarios de su aplicación.
código fuente del proyecto .
Skillbox recomienda:
- Curso práctico de dos años. .
- Curso por Internet .
- curso práctico anual .
Fuente: habr.com