Isọdi ọja jẹ pataki pupọ fun awọn ile-iṣẹ kariaye ti n ṣawari awọn orilẹ-ede ati agbegbe tuntun. Bakanna, agbegbe ni a nilo fun awọn ohun elo alagbeka. Ti olupilẹṣẹ ba bẹrẹ imugboroja kariaye, o ṣe pataki lati fun awọn olumulo lati orilẹ-ede miiran ni aye lati ṣiṣẹ pẹlu wiwo ni ede abinibi wọn. Ninu nkan yii, a yoo ṣẹda ohun elo abinibi React nipa lilo package naa .
Skillbox ṣe iṣeduro: Ẹkọ lori ayelujara ti ẹkọ .
A leti: fun gbogbo awọn oluka ti "Habr" - ẹdinwo ti 10 rubles nigbati o forukọsilẹ ni eyikeyi iṣẹ-ẹkọ Skillbox nipa lilo koodu ipolowo “Habr”.
Irinṣẹ ati ogbon
Lati loye nkan yii, o nilo awọn ọgbọn ipilẹ ni ṣiṣẹ pẹlu Ilu abinibi React. Lati mọ ararẹ pẹlu awọn eto ti ẹrọ iṣẹ, o le .
A yoo nilo awọn ẹya wọnyi ti awọn irinṣẹ sọfitiwia:
- Node v10.15.0
- npm 6.4.1
- owu 1.16.0
- fesi-abinibi 0.59.9
- fesi-abinibi-localize 1.1.3
- i18n-js 3.3.0
Berè
A yoo ṣẹda ohun elo kan ti yoo ṣe atilẹyin Gẹẹsi, Faranse ati Larubawa. Ni akọkọ a ṣẹda iṣẹ akanṣe tuntun nipa lilo react-native-cli. Lati ṣe eyi, o nilo lati tẹ eyi ni ebute naa:
$ fesi-abinibi init multiLanguage
$ cd multiLanguage
Fifi awọn pataki ikawe
Igbesẹ akọkọ ni lati fi sori ẹrọ react-abinibi-localize nipa titẹ atẹle naa:
$ fikun-un-ibile-agbegbe
Ti awọn iṣoro ba waye lakoko ilana fifi sori ẹrọ, .
Ile-ikawe fesi-abinibi-localize n fun idagbasoke idagbasoke si awọn ẹya ara ẹrọ ede pupọ. Ṣugbọn o nilo ile-ikawe kan diẹ sii - i18n.
Nkan yii ṣe apejuwe lilo lati le pese itumọ sinu JavaScript.
$ owu fi i18n-js
O dara, niwon i18n-js ko pese caching tabi memoization, Mo daba lilo lodash.memoize fun eyi:
$ fikun lodash.memoize
Nṣiṣẹ pẹlu awọn itumọ
Ni ibere fun ohun elo naa lati ni anfani lati ṣiṣẹ pẹlu awọn ede miiran, o nilo akọkọ lati ṣẹda itọsọna awọn itumọ inu src, lẹhinna awọn faili JSON mẹta fun ede kọọkan.
1. en.json fun English;
2. fr.json fun Faranse;
3. ar.json fun Arabic.
Awọn faili wọnyi ni awọn nkan JSON ninu pẹlu awọn bọtini ati iye. Bọtini naa yoo jẹ kanna fun ede kọọkan. O jẹ lilo nipasẹ ohun elo lati ṣafihan alaye ọrọ.
Iye ni ọrọ ti o nilo lati han si olumulo.
Ede Gẹẹsi:
{"hello": "Hello Ayé!"}
Faranse
{"hello": "Salutu le Monde!"}
Арабский
{"hello": "أهلاً بالعالم"}
O le ṣafikun awọn ede miiran ni ọna kanna.
koodu akọkọ
Ni aaye yii, o nilo lati ṣii faili App.js ki o ṣafikun awọn agbewọle wọle si rẹ:
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";Lẹhin eyi, awọn iṣẹ iranlọwọ ati awọn iduro ti wa ni afikun ti yoo wulo nigbamii.
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;
};O dara, ni bayi jẹ ki a ṣẹda paati kan ti kilasi 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
}
});Ni igba akọkọ ti ano, setI18nConfig (), kn ni ibẹrẹ iṣeto ni.
Lẹhinna o nilo lati ṣafikun olutẹtisi iṣẹlẹ kan si paatiDidMount (), ipin yii yoo tẹtisi awọn imudojuiwọn ati pe handleLocalizationChange () nigbati wọn ba ṣẹlẹ.
Ọna handleLocalizationChange () mu ṣiṣẹ setI18nConfig () ati forceUpdate (). Eyi jẹ pataki fun awọn ẹrọ Android bi paati gbọdọ wa ni jigbe fun awọn ayipada lati ṣe akiyesi.
Lẹhinna o nilo lati yọ gbigbọ kuro lati ọna paatiWillUnmount ().
Nikẹhin, ṣe () pada hello nipa lilo translation() ati fifi paramita bọtini kan kun. Lẹhin awọn igbesẹ wọnyi, ohun elo naa yoo ni anfani lati “loye” ede ti o nilo ati ṣafihan awọn ifiranṣẹ ninu rẹ.
Ohun elo ifilọlẹ
Bayi ni akoko lati ṣayẹwo bi itumọ naa ṣe n ṣiṣẹ.
Ni akọkọ, a ṣe ifilọlẹ ohun elo ni simulator tabi emulator nipa titẹ
$ fesi-abinibi run-ios
$ fesi-abinibi run-android
Yoo dabi iru eyi:
Bayi o le gbiyanju yiyipada ede si Faranse nipa ifilọlẹ ohun elo naa.
A ṣe ohun kanna pẹlu Arabic, ko si iyatọ.
Nítorí jina ki o dara.
Ṣugbọn kini yoo ṣẹlẹ ti o ba yan ede laileto eyiti ko si itumọ ninu ohun elo naa?
O wa ni jade pe iṣẹ-ṣiṣe ti FindBestLanguage ni lati pese itumọ ti aipe lati gbogbo awọn ti o wa. Bi abajade, ede aiyipada yoo han.
A n sọrọ nipa awọn eto foonu. Fun apẹẹrẹ, ninu emulator iOS o le rii aṣẹ ti awọn ede.
Ti ede ti o yan kii ṣe ede ti o fẹ, waBestAvailableLanguage da pada aisọye ki ede aiyipada han.
Ajeseku
react-native-localize ni API ti o pese iraye si nọmba nla ti awọn eroja ede. Ṣaaju ki o to bẹrẹ iṣẹ, .
awari
Ohun elo naa le ṣe ni ede pupọ laisi awọn iṣoro eyikeyi. React-native-localize jẹ aṣayan nla ti o fun ọ laaye lati faagun ipilẹ olumulo app rẹ.
Project orisun koodu .
Skillbox ṣe iṣeduro:
- Ọdun meji iṣẹ ikẹkọ .
- Ẹkọ ori ayelujara .
- Eko odun to wulo .
orisun: www.habr.com