La localisation des produits est très importante pour les entreprises internationales qui s'attaquent à de nouveaux pays et régions. De même, la localisation est nécessaire pour les applications mobiles. Si un développeur commence une expansion internationale, il est crucial d'offrir aux utilisateurs d'un autre pays la possibilité d'utiliser l'interface dans leur langue maternelle. Dans cet article, nous allons créer une application React Native en utilisant le paquet .
Skillbox recommande : Cours en ligne éducatif .
Rappelons-le : pour tous les lecteurs de « Habr » — une réduction de 10 000 roubles lors de l'inscription à tout cours Skillbox avec le code promo « Habr ».
Outils et compétences
Pour comprendre cet article, des compétences de base en React Native sont nécessaires. Pour découvrir les réglages de la machine de travail, vous pouvez .
Nous aurons besoin des versions suivantes des outils logiciels :
- 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
Commencer
Nous allons créer une application qui supportera les langues anglaise, française et arabe. Tout d'abord, créons un nouveau projet en utilisant react-native-cli. Pour cela, tapez ce qui suit dans le terminal :
$ react-native init multiLanguage
$ cd multiLanguage
Ajoutons les bibliothèques nécessaires
Tout d'abord, il faut installer react-native-localize en tapant ce qui suit :
$ yarn add react-native-localize
Si des problèmes surviennent lors de l'installation, .
La bibliothèque react-native-localize donne au développeur accès aux fonctionnalités multilingues. Mais elle nécessite une autre bibliothèque — i18n.
Cet article décrit l'utilisation pour assurer la traduction en JavaScript.
$ yarn add i18n-js
Comme i18n-js ne fournit pas de mise en cache ou de mémorisation, je propose d'utiliser lodash.memoize pour cela :
$ yarn add lodash.memoize
Travailler avec les traductions
Pour que l'application puisse travailler avec d'autres langues, il faut d'abord créer un répertoire translations à l'intérieur de src, puis trois fichiers JSON, un 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. Elle est utilisée par l'application pour afficher des informations textuelles.
La valeur (value) est le texte à montrer à l'utilisateur.
Langue anglaise :
{ "hello": "Hello World!" }
Français
{ "hello": "Salut le Monde!" }
Arabe
{ "hello": "أهلاً بالعالم" }
De la même manière, d'autres langues peuvent être ajoutées.
Code principal
À ce stade, ouvrez le fichier App.js et ajoutez l'import suivant :
importer React de "react";
importer * comme RNLocalize de "react-native-localize";
importer i18n de "i18n-js";
importer mémoïser de "lodash.memoize"; // Utiliser pour le cache/mémoïser pour de meilleures performances
import {
I18nManager,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
View
} de "react-native";Ensuite, des fonctions et constantes auxiliaires sont ajoutées, qui seront utiles par la suite.
const translationGetters = {
// require paresseux (le bundler metro ne supporte pas les liens symboliques)
ar: () => require("./src/translations/ar.json"),
en: () => require("./src/translations/en.json"),
fr: () => require("./src/translations/fr.json")
};
const translate = mémoïser(
(key, config) => i18n.t(key, config),
(key, config) => (config ? key + JSON.stringify(config) : key)
);
const setI18nConfig = () => {
// fallback si aucune langue disponible ne convient
const fallback = { languageTag: "en", isRTL: false };
const { languageTag, isRTL } =
RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
fallback;
// nettoyer le cache de traduction
translate.cache.clear();
// mettre à jour la direction de mise en page
I18nManager.forceRTL(isRTL);
// définir la config i18n-js
i18n.translations = { [languageTag]: translationGetters[languageTag]() };
i18n.locale = languageTag;
};Maintenant, créons le composant de classe App :
exporter par défaut class App étend React.Component {
constructeur(props) {
super(props);
setI18nConfig(); // définir la config initiale
}
componentDidMount() {
RNLocalize.addEventListener("change", this.handleLocalizationChange);
}
componentWillUnmount() {
RNLocalize.removeEventListener("change", this.handleLocalizationChange);
}
handleLocalizationChange = () => {
setI18nConfig();
this.forceUpdate();
};
rendre() {
return (
{translate("hello")}
);
}
}
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, dans componentDidMount(), il faut ajouter l'écoute des événements ; cet élément surveillera les mises à jour et appellera handleLocalizationChange() le cas échéant.
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 changements soient visibles.
Ensuite, il faut retirer l'écoute dans la méthode componentWillUnmount().
Enfin, dans render() est renvoyé 'hello' en utilisant translate() et en ajoutant le paramètre key. Après ces actions, l'application sera capable de comprendre quelle langue est nécessaire et affichera les messages dans cette langue.
Lancement de l'application
Il est maintenant temps de vérifier le fonctionnement de la traduction.
Tout d'abord, lançons l'application dans le simulateur ou l'émulateur en tapant
$ react-native run-ios
$ react-native run-android
Cela devrait ressembler à ceci :
Vous pouvez maintenant essayer de changer la langue en français, puis lancer l'application.
Pour la langue arabe, nous procédons de la même manière, il n'y a pas de différence.
Pour l'instant, tout se passe bien.
Mais que se passe-t-il si une langue aléatoire est choisie et qu'il n'y a pas de traduction pour cette langue dans l'application ?
Il s'avère que la tâche findBestLanguage consiste à fournir la meilleure traduction parmi celles disponibles. En conséquence, la langue par défaut sera affichée.
Il s'agit des paramètres du téléphone. Par exemple, dans l'émulateur iOS, vous pouvez voir l'ordre des langues.
Si la langue choisie n'est pas préférée, findBestAvailableLanguage renvoie undefined, donc la langue par défaut est affichée.
Bonus
react-native-localize a une API qui donne accès à une grande variété d'éléments linguistiques. Avant de commencer, .
Conclusions
Il est possible de rendre l'application multilingue sans trop de problèmes. React-native-localize est une excellente option qui permet d'élargir le public de l'application.
Code source du projet .
Skillbox recommande :
- Cours pratique de deux ans .
- Cours en ligne .
- Cours pratique d'un an .
Source : habr.com
