Tha sgìreachadh thoraidhean glè chudromach dha companaidhean eadar-nàiseanta a bhios a’ leasachadh dhùthchannan agus roinnean ùra. San aon dòigh, tha feum air sgìreachadh airson tagraidhean gluasadach. Ma thòisicheas leasaichear leudachadh eadar-nàiseanta, tha e cudromach cothrom a thoirt do luchd-cleachdaidh à dùthaich eile obrachadh leis an eadar-aghaidh sa chànan dhùthchasach aca. San artaigil seo, cruthaichidh sinn app React Native a’ cleachdadh a’ phacaid .
Tha Skillbox a’ moladh: Cùrsa foghlaim air-loidhne .
Tha sinn a ’cur nar cuimhne: airson a h-uile leughadair de "Habr" - lasachadh de 10 rubles nuair a chlàraicheas tu ann an cùrsa sam bith Skillbox a 'cleachdadh a' chòd adhartachaidh "Habr".
Innealan agus sgilean
Feumaidh tuigse air an artaigil seo sgilean bunaiteach React Native. Gus eòlas fhaighinn air roghainnean an inneal obrach, faodaidh tu .
Feumaidh sinn na dreachan seo de dh’ innealan bathar-bog:
- Node v10.15.0
- nimh 6.4.1
- snàth 1.16.0
- react-dùthchasach 0.59.9
- react-dùthchasach-ionadail 1.1.3
- i18n- js 3.3.0
A 'tòiseachadh
Cruthaichidh sinn tagradh a bheir taic do Bheurla, Fraingis agus Arabais. An toiseach bidh sinn a’ cruthachadh pròiseact ùr a’ cleachdadh react-native-cli. Gus seo a dhèanamh, anns a’ chrìoch feumaidh tu seo a thaipeadh:
$ react-dùthchasach init ioma-chànan
$ cd ioma-chànan
A 'cur ris na leabharlannan riatanach
Is e a’ chiad cheum react-native-localize a stàladh le bhith a’ taipeadh na leanas:
$ yarn cuir react-native-localize
Ma thachras tu air duilgheadasan tron phròiseas stàlaidh, .
Bheir an leabharlann react-native-localize cothrom don leasaiche air feartan ioma-chànanach. Ach tha feum aice air leabhar-lann eile — i18n.
Tha an artaigil a’ toirt cunntas air cleachdadh gus eadar-theangachadh a thoirt seachad ann an JavaScript.
$ snàth cuir i18n-js
Uill, leis nach eil i18n-js a’ toirt seachad tasgadan no cuimhneachan, tha mi a’ moladh a bhith a’ cleachdadh lodash.memoize airson seo:
$ snàth cuir lodash.memoize
Ag obair le eadar-theangachaidhean
Gus an obraich an aplacaid le cànanan eile, feumaidh tu an toiseach eòlaire eadar-theangachaidh a chruthachadh am broinn src, an uairsin trì faidhlichean JSON airson gach cànan.
1. en.json airson Beurla;
2. fr.json airson Frangach;
3. ar.json airson Arabais.
Anns na faidhlichean seo tha nithean JSON le iuchraichean is luachan. Bidh an iuchair mar an ceudna airson gach cànan. Tha e air a chleachdadh leis an tagradh gus fiosrachadh teacsa a thaisbeanadh.
Is e luach (luach) an teacsa a dh’ fheumar a shealltainn don neach-cleachdaidh.
Sasannach:
{ "hello": "Hello Saoghal!"}
Fraingis
{ "hello": "Salut le Monde!"}
Arabais
{ "hello": "أهلاً بالعالم"}
Faodar cànanan eile a chur ris san aon dòigh.
Prìomh chòd
Aig an ìre seo, feumaidh tu am faidhle App.js fhosgladh agus in-mhalairt a chuir ris:
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";Às deidh sin, thèid gnìomhan taice agus seasmhach a chur ris, a bhios feumail nas fhaide air adhart.
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;
};Uill, a-nis cruthaichidh sinn pàirt den chlas 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
}
});Tha a’ chiad eileamaid, setI18nConfig(), a’ suidheachadh a’ chiad rèiteachaidh.
An uairsin feumaidh sinn neach-èisteachd tachartais a chuir ri componentDidMount(), èistidh an eileamaid seo airson ùrachaidhean agus cuir fios gu handleLocalizationChange() nuair a thachras iad.
Tha an dòigh làimhseachaidhLocalizationChange() a’ toirt a-steach setI18nConfig() agus forceUpdate(). Tha seo riatanach airson innealan Android, oir feumaidh am pàirt a bhith air a thoirt seachad gus am bi na h-atharrachaidhean rim faicinn.
An uairsin feumaidh sinn an neach-èisteachd a thoirt air falbh bhon dòigh componentWillUnmount().
Mu dheireadh, tha hello air a thilleadh ann an render() le bhith a’ cleachdadh translate() agus a’ cur prìomh pharamadair ris. Às deidh na ceumannan seo, bidh an tagradh comasach air “tuigsinn” dè an cànan a tha a dhìth agus teachdaireachdan a thaisbeanadh ann.
Cur air bhog tagradh
Seo an t-àm airson sùil a thoirt air mar a tha an t-eadar-theangachadh ag obair.
An toiseach bidh sinn a’ ruith an aplacaid san t-simuladair no san emuladair le bhith a’ taipeadh
$ react-native run-ios
$ react-dùthchasach ruith-Android
Seallaidh e rudeigin mar seo:
A-nis faodaidh tu feuchainn ris a’ chànan atharrachadh gu Fraingis le bhith a’ cur an aplacaid air bhog.
Bidh sinn a’ dèanamh an aon rud leis a’ chànan Arabais, chan eil diofar ann.
Gu ruige seo tha a h-uile càil a’ dol gu math.
Ach dè thachras ma thaghas tu cànan air thuaiream aig nach eil eadar-theangachadh san aplacaid?
Tha e a’ tionndadh a-mach gur e obair findBestLanguage an eadar-theangachadh as fheàrr a thoirt seachad am measg na tha ri fhaighinn. Mar thoradh air an sin, thèid an cànan a chaidh a shuidheachadh gu bunaiteach a thaisbeanadh.
Tha e mu dheidhinn roghainnean fòn. Mar sin, mar eisimpleir, ann an iOS Emulator, chì thu an òrdugh chànanan.
Mura h-e an cànan taghte an cànan as fheàrr leat, tillidh findBestAvailableLanguage gun mhìneachadh gus an tèid an cànan bunaiteach a shealltainn.
Bònas
tha API aig react-native-localize a bheir cothrom air àireamh mhòr de eileamaidean cànain. Mus tòisich thu air obair, .
toraidhean
Faodar an tagradh a dhèanamh ioma-chànanach gun duilgheadas sam bith. Tha React-native-localize na dheagh roghainn a leigeas leat raon luchd-cleachdaidh an tagraidh agad a leudachadh.
Stòr-dàta pròiseact a .
Tha Skillbox a’ moladh:
- Cùrsa practaigeach dà bhliadhna .
- Cùrsa air-loidhne .
- Cùrsa bliadhna practaigeach .
Source: www.habr.com