Meelaynta badeecadu aad bay muhiim ugu tahay shirkadaha caalamiga ah ee sahaminta wadamo iyo gobolo cusub. Sidoo kale, deegaan ayaa looga baahan yahay codsiyada mobaylada. Haddii horumariye bilaabo balaadhinta caalamiga ah, waa muhiim in la siiyo dadka isticmaala waddan kale fursad ay kula shaqeeyaan interface-ka afkooda hooyo. Maqaalkan, waxaan ku abuuri doonaa arji React Native anagoo adeegsanayna xirmada .
Skillbox waxay ku talinaysaa: Koorso online ah oo waxbarasho .
Waxaan xusuusineynaa: dhammaan akhristayaasha "Habr" - qiimo dhimis ah 10 rubles marka la qorayo koorso kasta oo Skillbox ah iyadoo la adeegsanayo koodhka xayeysiinta "Habr".
Qalabka iyo xirfadaha
Si aad u fahamto maqaalkan, waxaad u baahan tahay xirfado aasaasi ah oo la shaqaynta React Native. Si aad naftaada u barato habaynta mishiinka shaqada, waad awoodaa .
Waxaan u baahan doonaa noocyadan qalabka software:
- Node v10.15.0
- npm 6.4.1
- dunta 1.16.0
- falcelin-dhaladeed 0.59.9
- falcelin-hooyo-maxaliyeed 1.1.3
- i18n-js 3.3.0
Bilaabashada
Waxaan abuuri doonaa codsi taageera Ingiriisi, Faransiis iyo Carabi. Marka hore waxaan abuurnaa mashruuc cusub anagoo adeegsanayna react-native-cli. Si tan loo sameeyo, waxaad u baahan tahay inaad tan ku qorto terminalka:
$ jawaab celin-hooyo int af-badan
$ cd luuqado badan
Ku darida maktabadaha lagama maarmaanka ah
Tallaabada ugu horreysa waa in lagu rakibo react-native-localize adiga oo ku qoraya kuwa soo socda:
$ yarn ku dar falcelin-hooyo-maxaliyeed
Haddii dhibaatooyinku dhacaan inta lagu jiro habka rakibidda, .
Maktabadda falcelinta-hooyo-maxaliyeed waxay siinaysaa horumariyaha marin u helka sifooyinka luuqadaha badan. Laakiin waxay u baahan tahay hal maktabad oo kale - i18n.
Maqaalkani wuxuu qeexayaa isticmaalka si loogu turjumo JavaScript.
$ yarn ku dar i18n-js
Hagaag, maadaama i18n-js aanu bixin kaydin ama xusuusin, waxaan soo jeedinayaa isticmaalka lodash.memoize tan:
$ yarn ku dar lodash.memoize
La shaqaynta tarjumaada
Si codsigu u awoodo inuu la shaqeeyo luqado kale, marka hore waxaad u baahan tahay inaad abuurto tusaha tarjumaada gudaha src, ka dibna seddex fayl JSON ah luqad kasta.
1. en.json ee Ingiriisiga;
2. fr.json ee Faransiis;
3. ar.json Carabi.
Faylashani waxay ka kooban yihiin walxo JSON oo leh furayaal iyo qiimayaal. Furaha ayaa isku mid noqon doona luqad kasta. Waxa loo isticmaalaa arjiga si uu u muujiyo macluumaadka qoraalka.
Qiimaha waa qoraalka u baahan in la tuso isticmaalaha.
Luqadda Ingiriisiga:
{"hello": "Hello aduunka!"}
Faransiis
{"hello": "Salutu le Monde!"}
ΠΡΠ°Π±ΡΠΊΠΈΠΉ
{"hello": "Ψ£ΩΩΨ§Ω Ψ¨Ψ§ΩΨΉΨ§ΩΩ "}
Waxaad ku dari kartaa luqado kale si la mid ah.
Koodhka ugu muhiimsan
Halkaa marka ay marayso, waxaad u baahan tahay inaad furto faylka App.js oo aad ku darto soo dejinta:
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";Taas ka dib, hawlaha kaalmaynta iyo joogtada ah ayaa lagu daraa kuwaas oo waxtar yeelan doona hadhow.
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;
};Hagaag, hadda aynu abuurno qayb ka mid ah fasalka App-ka:
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
}
});Cutubka koowaad, setI18nConfig(), wuxuu dejiyaa qaabaynta bilowga.
Markaa waxaad u baahan tahay inaad ku darto dhegeystaha dhacdada componentsDidMount(), curiyahani wuxuu dhagaysan doonaa cusboonaysiinta oo wac handleLocalizationChange() markay dhacaan.
Habka handleLocalizationChange() waxa uu hawlgeliyaa setI18nConfig() iyo forceUpdate(). Tani waxay lagama maarmaan u tahay aaladaha Android maadaama qaybta ay tahay in la sameeyo si isbeddelada loo dareemo.
Markaa waxaad u baahan tahay inaad ka saarto dhegeysiga habka componentWillUnmount().
Ugu dambayntii, render() waxa ay ku soo celisaa hello adiga oo isticmaalaya tarjumaadda() oo ku daraysa halbeeg muhiim ah. Tallaabooyinkan ka dib, codsigu wuxuu awood u yeelan doonaa inuu "fahmo" luqadda loo baahan yahay oo uu ku muujiyo farriimaha dhexdiisa.
Bilaabista codsiga
Hadda waa waqtigii la hubin lahaa sida turjumaada u shaqeyso.
Marka hore, waxaan ku bilownaa arjiga jilbaha ama emulatorka anagoo ku qorna
$ falcelinta-hooyo run-ios
$ react-hooyo run-android
Waxay u ekaan doontaa sidatan:
Hadda waxaad isku dayi kartaa inaad u beddesho luqadda Faransiiska adoo furaya codsiga.
Carabi sidaas oo kale ayaynu ku samaynaa, wax farqi ahi ma jiro.
Ilaa hadda aad u wanaagsan.
Laakiin maxaa dhacaya haddii aad doorato luqad aan toos ahayn oo aan arjiga ku jirin turjumaad?
Waxaa soo baxday in hawsha FindBestLanguage ay tahay in laga bixiyo tarjumaadda ugu wanaagsan dhammaan kuwa la heli karo. Natiijo ahaan, luqadda caadiga ah ayaa la soo bandhigi doonaa.
Waxaan ka hadleynaa dejinta telefoonka. Tusaale ahaan, emulator-ka iOS-ka waxaad ka arki kartaa siday u kala horreeyaan luqadaha.
Haddii luqadda la xushay aysan ahayn luqadda la door bidayo, helBestAvailableLanguage waxay soo celisaa iyada oo aan la qeexin si luqadda caadiga ah loo muujiyo.
Gunno
react-native-localize waxay leedahay API oo bixisa marin u helka tiro badan oo canaasiir luqadeed ah. Kahor intaadan bilaabin shaqada, .
natiijooyinka
Codsiga waxaa lagu samayn karaa luqado badan iyadoon wax dhibaato ah jirin. React-native-localize waa door weyn oo kuu ogolaanaya inaad ballaariso saldhigga isticmaale ee abkaaga.
Koodhka isha mashruuca .
Skillbox waxay ku talinaysaa:
- Koorso wax ku ool ah oo laba sano ah .
- Koorso onlayn ah .
- Koorsada sanadka ee wax ku oolka ah .
Source: www.habr.com