La localisation des produits est très importante pour les entreprises internationales qui explorent de nouveaux pays et régions. De même, la localisation est nécessaire pour les applications mobiles. Si un développeur entame une expansion internationale, il est important de donner aux utilisateurs d'un autre pays la possibilité de travailler avec l'interface dans leur langue maternelle. Dans cet article, nous allons créer une application React Native à l'aide du package .
Skillbox vous recommande : Cours éducatif en ligne .
Nous rappelons: pour tous les lecteurs de "Habr" - une remise de 10 000 roubles lors de l'inscription à n'importe quel cours Skillbox en utilisant le code promotionnel "Habr".
Outils et compétences
Pour comprendre cet article, vous avez besoin de compétences de base pour travailler avec React Native. Pour vous familiariser avec les réglages de la machine de travail, vous pouvez .
Nous aurons besoin de ces versions d'outils logiciels :
- Nœud v10.15.0
- npm 6.4.1
- fil 1.16.0
- réagir natif 0.59.9
- réagir-native-localiser 1.1.3
- i18n-js 3.3.0
Начинаем
Nous créerons une application qui prendra en charge l'anglais, le français et l'arabe. Nous créons d’abord un nouveau projet en utilisant React-native-cli. Pour ce faire, vous devez taper ceci dans le terminal :
$ réagir-native init multiLangue
$ cd multilingue
Ajout des bibliothèques nécessaires
La première étape consiste à installer React-Native-Localize en tapant ce qui suit :
$ fil ajouter réagir-natif-localiser
Si des problèmes surviennent pendant le processus d'installation, .
La bibliothèque React-Native-Localize donne au développeur accès à des fonctionnalités multilingues. Mais elle a besoin d'une bibliothèque supplémentaire - i18n.
Cet article décrit l'utilisation afin de fournir une traduction en JavaScript.
$ fil ajouter i18n-js
Eh bien, puisque i18n-js ne fournit pas de mise en cache ni de mémorisation, je suggère d'utiliser lodash.memoize pour cela :
$ fil ajouter lodash.memoize
Travailler avec des traductions
Pour que l'application puisse fonctionner avec d'autres langues, vous devez d'abord créer un répertoire de traductions dans src, puis trois fichiers JSON pour chaque langue.
1. en.json pour l'anglais ;
2. fr.json pour le français ;
3. ar.json pour l'arabe.
Ces fichiers contiennent des objets JSON avec des clés et des valeurs. La clé sera la même pour chaque langue. Il est utilisé par l'application pour afficher des informations textuelles.
La valeur est le texte qui doit être montré à l'utilisateur.
Anglais:
{"bonjour": "Bonjour tout le monde !"}
Français
{"bonjour": "Salut le Monde !"}
Arabe
{ "bonjour": "أهلاً بالعالم"}
Vous pouvez ajouter d'autres langues de la même manière.
Code principal
À ce stade, vous devez ouvrir le fichier App.js et y ajouter des importations :
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";Après cela, des fonctions auxiliaires et des constantes sont ajoutées qui seront utiles plus tard.
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;
};Eh bien, créons maintenant un composant de la 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
}
});Le premier élément, setI18nConfig(), définit la configuration initiale.
Ensuite, vous devez ajouter un écouteur d'événement à composantDidMount(), cet élément écoutera les mises à jour et appellera handleLocalizationChange() lorsqu'elles se produiront.
La méthode handleLocalizationChange() active setI18nConfig() et forceUpdate(). Cela est nécessaire pour les appareils Android car le composant doit être rendu pour que les modifications soient visibles.
Ensuite, vous devez supprimer l'écoute de la méthode componentWillUnmount().
Enfin, render() renvoie bonjour en utilisant Translate() et en y ajoutant un paramètre clé. Après ces étapes, l'application sera capable de « comprendre » quelle langue est nécessaire et d'y afficher des messages.
Lancement de l'application
Il est maintenant temps de vérifier le fonctionnement de la traduction.
Tout d'abord, on lance l'application dans le simulateur ou l'émulateur en tapant
$ Run-ios natifs de réaction
$ run-android réactif natif
Cela ressemblera à ceci:
Vous pouvez maintenant essayer de changer la langue en français en lançant l'application.
On fait la même chose avec l’arabe, il n’y a aucune différence.
Jusqu'ici, tout va bien.
Mais que se passe-t-il si vous sélectionnez une langue au hasard pour laquelle il n’y a pas de traduction dans l’application ?
Il s'avère que la tâche de findBestLanguage est de fournir la traduction optimale parmi toutes celles disponibles. En conséquence, la langue par défaut sera affichée.
Nous parlons des paramètres du téléphone. Par exemple, dans l'émulateur iOS, vous pouvez voir l'ordre des langues.
Si la langue sélectionnée n'est pas la langue préférée, findBestAvailableLanguage renvoie undefined afin que la langue par défaut soit affichée.
prime
React-native-localize dispose d'une API qui donne accès à un grand nombre d'éléments de langage. Avant de commencer à travailler, .
résultats
L'application peut être rendue multilingue sans aucun problème. React-native-localize est une excellente option qui vous permet d'élargir la base d'utilisateurs de votre application.
Code source du projet .
Skillbox vous recommande :
- Cours pratique de deux ans .
- Cours en ligne .
- Cours pratique de l'année .
Source: habr.com