De lokalisaasje fan produkten is heul wichtich foar ynternasjonale bedriuwen dy't nije lannen en regio's ûntwikkelje. Op deselde manier is lokalisaasje nedich foar mobile applikaasjes. As in ûntwikkelder ynternasjonale útwreiding begjint, is it wichtich om brûkers út in oar lân de kâns te jaan om te wurkjen mei de ynterface yn har memmetaal. Yn dit artikel sille wy in React Native-app meitsje mei it pakket .
Skillbox advisearret: Edukative online kursus .
Wy herinnerje: foar alle lêzers fan "Habr" - in koarting fan 10 roebel by it ynskriuwen fan in Skillbox-kursus mei de promoasjekoade "Habr".
Tools en feardichheden
It begripen fan dit artikel fereasket basis React Native-feardigens. Om yn 'e kunde te kommen mei de ynstellingen fan' e wurkjende masine, kinne jo .
Wy hawwe dizze ferzjes fan software-ark nedich:
- Node v10.15.0
- npm 6.4.1
- garen 1.16.0
- react-native 0.59.9
- react-native-localize 1.1.3
- i18n-js 3.3.0
Begjin te begjinnen
Wy sille in applikaasje oanmeitsje dy't Ingelsk, Frânsk en Arabysk sil stypje. Earst meitsje wy in nij projekt mei react-native-cli. Om dit te dwaan, yn 'e terminal moatte jo dit ynfiere:
$ react-native init multiLanguage
$ cd meartalige
It tafoegjen fan de fereaske biblioteken
De earste stap is om react-native-localize te ynstallearjen troch it folgjende te typen:
$ yarn tafoegje react-native-localize
As jo problemen tsjinkomme tidens it ynstallaasjeproses, .
De bibleteek react-native-localize jout de ûntwikkelder tagong ta meartalige funksjes. Mar se moat in oare bibleteek - i18n.
It artikel beskriuwt it gebrûk om oersetting yn JavaScript te leverjen.
$ yarn tafoegje i18n-js
No, om't i18n-js gjin caching of memoisaasje leveret, stel ik foar om hjirfoar lodash.memoize te brûken:
$ yarn tafoegje lodash.memoize
Wurkje mei oersettingen
Om de applikaasje mei oare talen te wurkjen, moatte jo earst in oersettingsmap oanmeitsje yn src, dan trije JSON-bestannen foar elk fan 'e talen.
1. en.json foar Ingelsk;
2. fr.json foar Frânsk;
3. ar.json foar Arabysk.
Dizze bestannen befetsje JSON-objekten mei kaaien en wearden. De kaai sil itselde wêze foar elke taal. It wurdt brûkt troch de applikaasje om tekstuele ynformaasje wer te jaan.
Wearde (wearde) is de tekst dy't oan de brûker toand wurde moat.
Ingelsk:
{ "hello": "Hallo wrâld!"}
Frânsk
{ "hello": "Salut le Monde!"}
Arabysk
{ "hello": "Trochwiisd"}
Oare talen kinne op deselde manier wurde tafoege.
Main koade
Op dit punt moatte jo de App.js-bestân iepenje en ymporten taheakje:
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";Dêrnei wurde ekstra funksjes en konstanten tafoege, dy't letter nuttich wêze sil.
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;
};No, litte wy no in komponint meitsje fan 'e App-klasse:
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
}
});It earste elemint, setI18nConfig (), stelt de earste konfiguraasje.
Dan moatte wy tafoegje in evenemint harker oan componentDidMount (), dit elemint sil harkje nei fernijings en neame handleLocalizationChange () as se foarkomme.
De metoade handleLocalizationChange () ropt setI18nConfig () en forceUpdate (). Dit is nedich foar Android-apparaten, om't de komponint moat wurde werjûn om de wizigingen sichtber te wurden.
Dan moatte wy de harker fuortsmite fan 'e componentWillUnmount () metoade.
Ta beslút, hello werom yn render () troch mei help fan translate () en it tafoegjen fan in kaai parameter oan it. Nei dizze stappen sil de applikaasje "begripe" kinne hokker taal nedich is en berjochten dêryn sjen litte.
Lansearring fan applikaasje
No is it tiid om te kontrolearjen hoe't de oersetting wurket.
Earst rinne wy de applikaasje yn 'e simulator of emulator troch te typen
$ reagearje-native run-ios
$ reagearje-native run-android
It sil der sa útsjen:
No kinne jo besykje de taal te feroarjen yn it Frânsk troch de applikaasje te starten.
Wy dogge itselde mei de Arabyske taal, der is gjin ferskil.
Oant no ta giet alles goed.
Mar wat bart der as jo in willekeurige taal selektearje dy't gjin oersetting yn 'e app hat?
It docht bliken dat de taak fan findBestLanguage is om de bêste mooglike oersetting te leverjen ûnder alle beskikbere. As resultaat sil de taal dy't standert ynsteld is werjûn wurde.
It giet oer telefoanynstellingen. Sa kinne jo bygelyks yn 'e iOS-emulator de folchoarder fan talen sjen.
As de selektearre taal net de foarkarstaal is, jout findBestAvailableLanguage ûndefiniearre werom, sadat de standerttaal werjûn wurdt.
Bonus
react-native-localize hat in API dy't tagong jout ta in grut tal taaleleminten. Foardat it wurk begjint, .
befinings
De applikaasje kin sûnder problemen meartalich makke wurde. React-native-localize is in geweldige opsje wêrmei jo it berik fan brûkers fan jo applikaasje kinne útwreidzje.
Projekt boarne koade .
Skillbox advisearret:
- Twa jier praktyske kursus .
- Online kursus .
- Praktyske jierkursus .
Boarne: www.habr.com