Lokalizasyon pwodwi trè enpòtan pou konpayi entènasyonal yo eksplore nouvo peyi ak rejyon yo. Menm jan an tou, lokalizasyon nesesè pou aplikasyon mobil. Si yon pwomotè kòmanse ekspansyon entènasyonal, li enpòtan pou bay itilizatè ki soti nan yon lòt peyi opòtinite pou yo travay ak koòdone nan lang natif natal yo. Nan atik sa a, nou pral kreye yon aplikasyon React Native lè l sèvi avèk pake a .
Skillbox rekòmande: Kou edikatif sou entènèt .
Nou raple: pou tout lektè "Habr" - yon rabè nan 10 rubles lè w ap enskri nan nenpòt kou Skillbox lè l sèvi avèk kòd pwomosyon "Habr".
Zouti ak konpetans
Pou w konprann atik sa a, ou bezwen konpetans debaz nan travay ak React Native. Pou familyarize tèt ou ak anviwònman yo nan machin nan k ap travay, ou kapab .
Nou pral bezwen vèsyon sa yo nan zouti lojisyèl:
- Node v10.15.0
- npm 6.4.1
- fil 1.16.0
- reyaji-natif 0.59.9
- reyaji-natif-lokalize 1.1.3
- i18n-js 3.3.0
Pou kòmanse
Nou pral kreye yon aplikasyon ki pral sipòte angle, franse ak arab. Premyèman, nou kreye yon nouvo pwojè lè l sèvi avèk react-native-cli. Pou fè sa, ou bezwen tape sa a nan tèminal la:
$ reyaji-natif init plizyè lang
$ cd miltilang
Ajoute bibliyotèk ki nesesè yo
Premye etap la se enstale react-native-localize pa tape sa ki annapre yo:
$ fil ajoute reyaji-natif-localize
Si pwoblèm rive pandan pwosesis enstalasyon an, .
Bibliyotèk reyaji-natif-lokalize bay pwomotè aksè a karakteristik plizyè lang. Men, li bezwen yon lòt bibliyotèk - i18n.
Atik sa a dekri itilizasyon an yo nan lòd yo bay tradiksyon nan JavaScript.
$ fil ajoute i18n-js
Oke, depi i18n-js pa bay kachèt oswa memoization, mwen sijere itilize lodash.memoize pou sa a:
$ fil ajoute lodash.memoize
Travay ak tradiksyon
Pou aplikasyon an kapab travay ak lòt lang, premye bezwen kreye yon anyè tradiksyon andedan src, apresa twa fichye JSON pou chak lang.
1. en.json pou angle;
2. fr.json pou franse;
3. ar.json pou arab.
Fichye sa yo genyen objè JSON ak kle ak valè. Kle a ap menm pou chak lang. Li itilize pa aplikasyon an pou montre enfòmasyon tèks.
Valè se tèks la ki bezwen montre itilizatè a.
Angle:
{"hello": "Bonjou lemonn!"}
Французский
{"hello": "Salut le Monde!"}
Арабский
{ "bonjou": "أهلاً بالعالم"}
Ou ka ajoute lòt lang nan menm fason an.
Kòd prensipal la
Nan pwen sa a, ou bezwen louvri dosye a App.js epi ajoute enpòtasyon nan li:
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";Apre sa, fonksyon oksilyè ak konstan yo ajoute ki pral itil pita.
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;
};Oke, kounye a ann kreye yon eleman nan klas la 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
}
});Premye eleman, setI18nConfig(), mete konfigirasyon inisyal la.
Lè sa a, ou bezwen ajoute yon koute evènman nan componentDidMount (), eleman sa a pral koute mizajou epi rele handleLocalizationChange () lè yo rive.
Metòd handleLocalizationChange() aktive setI18nConfig() ak forceUpdate(). Sa a se nesesè pou aparèy android kòm eleman nan dwe rann pou chanjman yo dwe aparan.
Lè sa a, ou bezwen retire koute nan metòd la componentWillUnmount().
Finalman, render() retounen alo lè l sèvi avèk translate() epi ajoute yon paramèt kle nan li. Apre etap sa yo, aplikasyon an pral kapab "konprann" ki lang ki nesesè epi montre mesaj ladan l.
Lansman aplikasyon an
Kounye a se moman pou tcheke kijan tradiksyon an fonksyone.
Premyèman, nou lanse aplikasyon an nan similatè a oswa emulateur pa tape
$ reyaji-natif kouri-ios
$ reyaji-natif kouri-android
Li pral gade yon bagay tankou sa a:
Koulye a, ou ka eseye chanje lang nan franse pa lanse aplikasyon an.
Nou fè menm bagay ak arab, pa gen diferans.
Jiskaprezan byen.
Men, sa k ap pase si w chwazi yon lang owaza pou ki pa gen tradiksyon nan aplikasyon an?
Li sanble ke travay la nan findBestLanguage se bay tradiksyon an pi bon nan tout sa ki disponib. Kòm yon rezilta, lang default yo pral parèt.
Nou ap pale de paramèt telefòn yo. Pou egzanp, nan iOS Emulation ou ka wè lòd lang yo.
Si lang ki chwazi a se pa lang pi pito a, findBestAvailableLanguage retounen undefined pou yo montre lang default la.
Bonis
react-native-localize gen yon API ki bay aksè a yon gwo kantite eleman lang. Anvan ou kòmanse travay, .
Jwenn
Aplikasyon an ka fè plizyè lang san okenn pwoblèm. React-native-localize se yon gwo opsyon ki pèmèt ou elaji baz itilizatè app ou a.
Kòd sous pwojè a .
Skillbox rekòmande:
- Dezan kou pratik .
- Kou sou entènèt .
- Kou pratik pou ane .
Sous: www.habr.com