Tlhahiso ea sebaka sa lihlahisoa ke ea bohlokoa haholo bakeng sa lik'hamphani tsa machaba tse hlahlobang linaha le libaka tse ncha. Ka mokhoa o ts'oanang, ts'ebeliso ea lehae ea hlokahala bakeng sa lits'ebetso tsa mehala. Haeba moqapi a qala katoloso ea machaba, ho bohlokoa ho fa basebelisi ba tsoang naheng e 'ngoe monyetla oa ho sebetsa le sebopeho sa puo ea bona. Sengoliloeng sena, re tla theha sesebelisoa sa React Native re sebelisa sephutheloana .
Skillbox e khothaletsa: Lithuto tsa inthaneteng .
Re hopotsa: bakeng sa babali bohle ba "Habr" - theolelo ea li-ruble tse 10 ha u ngolisa thupelong efe kapa efe ea Skillbox u sebelisa khoutu ea papatso ea "Habr".
Lisebelisoa le litsebo
Ho utloisisa sengoloa sena, o hloka tsebo ea mantlha ea ho sebetsa le React Native. Ho tloaelana le litlhophiso tsa mochini o sebetsang, o ka khona .
Re tla hloka mefuta ena ea lisebelisoa tsa software:
- Node v10.15.0
- npm 6.4.1
- khoele 1.16.0
- ho arabela ka tlhaho 0.59.9
- karabelo-letsoalloa-localise 1.1.3
- i18n-js 3.3.0
Qala
Re tla etsa kopo e tla tšehetsa Senyesemane, Sefora le Searabia. Pele re theha projeke e ncha re sebelisa react-native-cli. Ho etsa sena, o hloka ho thaepa sena ho terminal:
$ react-native init multiLanguage
$ cd Lipuo tse ngata
Ho eketsa lilaebrari tse hlokahalang
Mohato oa pele ke ho kenya react-native-localize ka ho ngola se latelang:
$ khoele eketsa react-native-localize
Haeba mathata a hlaha nakong ea ts'ebetso ea ho kenya, .
Laeborari ea react-native-localize e fa mohlahlami monyetla oa ho fumana likarolo tsa lipuo tse ngata. Empa o hloka laebrari e 'ngoe hape - i18n.
Sengoliloeng sena se hlalosa tšebeliso e le ho fana ka phetolelo ho JavaScript.
$ khoele eketsa i18n-js
Leha ho le joalo, kaha i18n-js ha e fane ka caching kapa memoization, ke khothaletsa ho sebelisa lodash.memoize bakeng sa sena:
$ khoele eketsa lodash.memoize
Ho sebetsa le liphetolelo
E le hore sesebelisoa se khone ho sebetsa le lipuo tse ling, u lokela ho qala ka ho theha buka ea liphetolelo ka hare ho src, ebe lifaele tse tharo tsa JSON bakeng sa puo ka 'ngoe.
1. en.json bakeng sa Senyesemane;
2. fr.json bakeng sa Sefora;
3. ar.json bakeng sa Searabia.
Lifaele tsena li na le lintho tsa JSON tse nang le linotlolo le boleng. Senotlolo se tla tšoana puong ka 'ngoe. E sebelisoa ke sesebelisoa ho hlahisa lintlha tsa mongolo.
Boleng ke mongolo o lokelang ho bontšoa ho mosebelisi.
Senyesemane:
{"hello": "Dumela Lefatshe!"}
Sefora
{"hello": "Salut le Monde!"}
Searabia
{ "hello": "أهلاً بالعالم"}
U ka eketsa lipuo tse ling ka tsela e tšoanang.
Khoutu ea mantlha
Mothating ona, o hloka ho bula faele ea App.js le ho kenya lintho tse tsoang kantle ho eona ho eona:
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";Ka mor'a sena, ho eketsoa mesebetsi e thusang le li-constants tse tla ba molemo hamorao.
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;
};Joale, ha re theheng karolo ea sehlopha sa 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
}
});Ntho ea pele, setI18nConfig(), e beha tlhophiso ea pele.
Ebe o hloka ho kenyelletsa momameli oa ketsahalo ho componentDidMount(), karolo ena e tla mamela bakeng sa liapdeite le ho letsetsa handleLocalizationChange() ha li etsahala.
Mokgwa wa HandleLocalizationChange() o kenya tshebetsong setI18nConfig() le forceUpdate(). Sena sea hlokahala bakeng sa lisebelisoa tsa Android kaha karolo e tlameha ho fanoa hore liphetoho li bonahale.
Ebe o hloka ho tlosa ho mamela ho tsoa ho componentWillUnmount() mokhoa.
Qetellong, render() returns hello ka ho sebelisa translate() le ho eketsa parameter ea bohlokoa ho eona. Ka mor'a mehato ena, kopo e tla khona ho "utloisisa" hore na ke puo efe e hlokahalang le ho bontša melaetsa ho eona.
Ho qala kopo
Joale ke nako ea ho hlahloba hore na phetolelo e sebetsa joang.
Taba ea pele, re qala ts'ebeliso ho simulator kapa emulator ka ho thaepa
$ react-native run-ios
$ react-native run-android
E tla shebahala tjena:
Joale o ka leka ho fetolela puo ho Sefora ka ho qala ts'ebeliso.
Re etsa ntho e tšoanang ka Searabia, ha ho na phapang.
Ke khotsofetse ho fihlela hajoale.
Empa ho etsahala'ng haeba u khetha puo e sa reroang eo ho eona ho se nang phetolelo ho kopo?
Hoa fumaneha hore mosebetsi oa findBestLanguage ke ho fana ka phetolelo e nepahetseng ho tsoa ho tse fumanehang. Ka lebaka leo, puo ea kamehla e tla hlahisoa.
Re bua ka li-setting tsa fono. Ka mohlala, ho emulator ea iOS u ka bona tatellano ea lipuo.
Haeba puo e khethiloeng e se eona puo e ratoang, findBestAvailableLanguage e khutlisa e sa hlalosoa e le hore puo ea kamehla e bonts'e.
Bonase
react-native-localize e na le API e fanang ka phihlello ea likarolo tse ngata tsa puo. Pele o qala mosebetsi, .
fumanoeng ke
Sesebelisoa se ka etsoa ka lipuo tse ngata ntle le mathata. React-native-localize ke khetho e ntle haholo e u lumellang hore u holise basebelisi ba sesebelisoa sa hau.
Khoutu ea mohloli oa morero .
Skillbox e khothaletsa:
- Thuto ea lilemo tse peli e sebetsang .
- Tsela ea inthanete .
- Thuto ea selemo e sebetsang .
Source: www.habr.com