Ndepụta ngwaahịa dị ezigbo mkpa maka ụlọ ọrụ mba ụwa na-enyocha obodo na mpaghara ọhụrụ. N'otu aka ahụ, achọrọ mpaghara maka ngwa mkpanaka. Ọ bụrụ na onye nrụpụta amalite mgbasawanye mba ụwa, ọ dị mkpa inye ndị ọrụ si mba ọzọ ohere iji rụọ ọrụ na interface n'asụsụ ala nna ha. N'isiokwu a, anyị ga-emepụta ngwa Native React site na iji ngwugwu .
Skillbox na-atụ aro: Usoro nkuzi n'ịntanetị .
Anyị na -echetara: maka ndị na-agụ Habr niile - ego 10 ruble mgbe ị na-edebanye aha na nkuzi Skillbox ọ bụla site na iji koodu mgbasa ozi Habr.
Ngwá ọrụ na nkà
Iji ghọta akụkọ a, ịchọrọ nkà ndị bụ isi n'ịrụ ọrụ na React Native. Iji mara onwe gị na ntọala nke igwe na-arụ ọrụ, ị nwere ike .
Anyị ga-achọ ụdị ngwa ngwanrọ ndị a:
- Ọnụ v10.15.0
- npm 6.4.1
- yarn 1.16.0
- meghachi omume-nwa afọ 0.59.9
- meghachi omume-nwa afọ-localize 1.1.3
- i18n-js 3.3.0
Na-amalite
Anyị ga-emepụta ngwa ga-akwado Bekee, French na Arabic. Nke mbụ, anyị na-emepụta ọrụ ọhụrụ site na iji react-native-cli. Iji mee nke a, ịkwesịrị pịnye nke a na njedebe:
$ react-nwa afọ init multiLanguage
$ cd ọtụtụ asụsụ
Na-agbakwụnye ọba akwụkwọ ndị dị mkpa
Nzọụkwụ mbụ bụ ịwụnye react-native-localize site na ịpị ihe ndị a:
$ yarn tinye mmeghachi omume-nwaafọ-localize
Ọ bụrụ na nsogbu emee n'oge usoro nrụnye, .
Ọbá akwụkwọ na-emeghachi omume-nwaafọ-na-enye onye nrụpụta ohere ịnweta atụmatụ asụsụ ọtụtụ. Mana ọ chọrọ otu ọba akwụkwọ ọzọ - i18n.
Isiokwu a na-akọwa ojiji iji nye ntụgharị asụsụ Javascript.
$ yarn tinye i18n-js
Ọ dị mma, ebe ọ bụ na i18n-js anaghị enye caching ma ọ bụ ntughari, ana m atụ aro iji lodash.memoize maka nke a:
$ yarn tinye lodash.memoize
Na-arụ ọrụ na ntụgharị asụsụ
Ka ngwa ahụ wee nwee ike iji asụsụ ndị ọzọ rụọ ọrụ, ị ga-ebu ụzọ mepụta ndekọ ntụgharị asụsụ n'ime src, wee mechaa faịlụ JSON atọ maka asụsụ ọ bụla.
1. en.json maka Bekee;
2. fr.json maka French;
3. ar.json maka Arabic.
Faịlụ ndị a nwere ihe JSON nwere igodo na ụkpụrụ. Igodo ga-abụ otu maka asụsụ ọ bụla. Ngwa na-eji ya gosi ozi ederede.
Uru bụ ederede kwesịrị igosi onye ọrụ.
Igbo:
{"ndewo": "Ndewo ụwa!"}
French
{"ndewo": "Salut le Monde!"}
Арабский
{"ndewo": "أهلاً بالعالم"}
Ị nwere ike itinye asụsụ ndị ọzọ n'otu ụzọ ahụ.
Koodu isi
N'oge a, ịkwesịrị imepe faịlụ App.js wee tinye mbubata na ya:
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";Mgbe nke a gasịrị, a na-agbakwunye ọrụ inyeaka na nkwụsịtụ nke ga-aba uru mgbe e mesịrị.
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;
};Ọ dị mma, ugbu a ka anyị mepụta akụkụ nke klas ngwa:
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
}
});Ihe mbụ, setI18nConfig(), na-edozi nhazi mbụ.
Mgbe ahụ ịkwesịrị ịgbakwunye ihe omume na-ege ntị na componentsDidMount(), ihe a ga-ege ntị maka mmelite wee kpọọ handleLocalizationChange() mgbe ha mere.
Usoro handleLocalizationChange() na-arụ ọrụ setI18nConfig() na forceUpdate(). Nke a dị mkpa maka ngwaọrụ gam akporo dị ka akụrụngwa ga-emerịrị maka mgbanwe ndị a ga-ahụ anya.
Mgbe ahụ ịkwesịrị iwepu ege ntị na usoro componentsWillUnmount().
N'ikpeazụ, nyeghachi() weghachi ndewo site na iji ntụgharị asụsụ () ma tinye otu isi ihe na ya. Mgbe usoro ndị a gasịrị, ngwa ahụ ga-enwe ike "ịghọta" asụsụ achọrọ ma gosipụta ozi na ya.
Mwepụta ngwa
Ugbu a bụ oge ịlele ka ntụgharị asụsụ si arụ ọrụ.
Nke mbụ, anyị na-amalite ngwa na simulator ma ọ bụ emulator site na ịpị
$ react-nwa afọ run-ios
$ react-nwa afọ run-android
Ọ ga-adị ka nke a:
Ugbu a ị nwere ike ịgbalị ịgbanwe asụsụ ka ọ bụrụ French site na ịmalite ngwa ahụ.
Anyị na Arabic na-eme otu ihe ahụ, ọ dịghị ihe dị iche.
Dị nnọọ mma.
Mana gịnị ga - eme ma ọ bụrụ na ịhọrọ asụsụ enweghị atụ nke enweghị ntụgharị asụsụ na ngwa a?
Ọ tụgharịrị na ọrụ chọtaBestLanguage bụ ịnye ntụgharị asụsụ kacha mma sitere na ndị niile dị. N'ihi ya, a ga-egosipụta asụsụ ndabara.
Anyị na-ekwu maka ntọala ekwentị. Dịka ọmụmaatụ, na emulator iOS ị nwere ike ịhụ usoro asụsụ.
Ọ bụrụ na asụsụ ahọpụtara abụghị asụsụ kacha amasị, chọtaBestAvailableLanguage na-eweghachite akọwapụtaghị ya ka edepụta asụsụ ndabara.
Daashi
react-native-localize nwere API nke na-enye ohere ịnweta nnukwu ọnụọgụ asụsụ. Tupu ịmalite ọrụ, .
Nchoputa
Enwere ike ịme ngwa ahụ ka ọ bụrụ ọtụtụ asụsụ na-enweghị nsogbu ọ bụla. React-native-localize bụ nnukwu nhọrọ na-enye gị ohere ịgbasa ntọala onye ọrụ ngwa gị.
Koodu isi mmalite oru ngo .
Skillbox na-atụ aro:
- Ihe ọmụmụ bara uru nke afọ abụọ .
- N'ezie online .
- Ihe ọmụmụ otu afọ bara uru .
isi: www.habr.com