Haɗin samfuran yana da matukar mahimmanci ga kamfanonin ƙasa da ƙasa da ke binciken sabbin ƙasashe da yankuna. Hakazalika, ana buƙatar zama wuri don aikace-aikacen hannu. Idan mai haɓakawa ya fara faɗaɗa ƙasa da ƙasa, yana da mahimmanci a ba masu amfani daga wata ƙasa damar yin aiki tare da keɓancewa a cikin yarensu na asali. A cikin wannan labarin, za mu ƙirƙiri aikace-aikacen React Native ta amfani da kunshin .
Skillbox yana ba da shawarar: Ilimin kan layi kwas .
Muna tunatarwa: ga duk masu karatu na "Habr" - rangwame na 10 rubles lokacin yin rajista a kowane kwas na Skillbox ta amfani da lambar talla "Habr".
Kayan aiki da basira
Don fahimtar wannan labarin, kuna buƙatar ƙwarewar asali a cikin aiki tare da React Native. Don sanin kanku da saitunan injin aiki, zaku iya .
Za mu buƙaci waɗannan nau'ikan kayan aikin software:
- Node v10.15.0
- npm 6.4.1
- yarn 1.16.0
- amsa- ɗan ƙasa 0.59.9
- mayar da martani- ɗan ƙasa-localize 1.1.3
- i18n-js 3.3.0
Farawa
Za mu ƙirƙiri aikace-aikacen da zai tallafa wa Ingilishi, Faransanci da Larabci. Da farko muna ƙirƙirar sabon aiki ta amfani da react-native-cli. Don yin wannan, kuna buƙatar buga wannan a cikin Terminal:
$ amsa-hasashen init MultiLanguage
$ cd MultiLanguage
Ƙara ɗakunan karatu da suka dace
Mataki na farko shine shigar da react-native-localize ta hanyar buga mai zuwa:
$ ƙara mayar da martani- ɗan ƙasa-localize
Idan matsaloli sun faru a lokacin shigarwa, .
Laburaren amsa-haɗe-haɗe-localize yana ba mai haɓaka dama ga fasalulluka na harsuna da yawa. Amma tana buƙatar ƙarin ɗakin karatu guda ɗaya - i18n.
Wannan labarin ya bayyana amfanin domin samar da fassara zuwa JavaScript.
$ ƙara i18n-js
Da kyau, tun da i18n-js baya samar da caching ko haddacewa, Ina ba da shawarar amfani da lodash.memoize don wannan:
$ ƙara lodash.memoize
Aiki tare da fassarori
Domin aikace-aikacen ya sami damar yin aiki tare da wasu harsuna, da farko kuna buƙatar ƙirƙirar kundin fassarar cikin src, sannan fayilolin JSON guda uku don kowane harshe.
1. en.json na Turanci;
2. fr.json na Faransanci;
3. ar.json na Larabci.
Waɗannan fayilolin sun ƙunshi abubuwa JSON tare da maɓalli da ƙima. Makullin zai kasance iri ɗaya ga kowane harshe. Ana amfani da aikace-aikacen don nuna bayanan rubutu.
Ƙimar ita ce rubutun da ake buƙatar nunawa ga mai amfani.
Turanci:
{"hello": "Hello Duniya!"}
Faransanci
{"hello": "Salutu Le Monde!"}
Арабский
{"hello": "أهلاً بالعالم"}
Kuna iya ƙara wasu harsuna ta hanya ɗaya.
Babban lambar
A wannan gaba, kuna buƙatar buɗe fayil ɗin App.js kuma ƙara shigo da kaya zuwa gare shi:
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";Bayan wannan, ana ƙara ayyuka na taimako da masu tsauri waɗanda za su yi amfani daga baya.
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;
};To, yanzu bari mu ƙirƙiri wani bangare na ajin 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
}
});Abu na farko, setI18nConfig(), yana saita saitin farko.
Sannan kuna buƙatar ƙara mai sauraron taron zuwa componentsDidMount(), wannan kashi zai saurari sabuntawa kuma ya kira handleLocalizationChange() lokacin da suka faru.
Hanyar handleLocalizationChange() tana kunna setI18nConfig() da forceUpdate(). Wannan ya zama dole don na'urorin Android kamar yadda dole ne a sanya bangaren don canje-canjen su zama sananne.
Sannan kuna buƙatar cire sauraron daga hanyar componentsWillUnmount().
A ƙarshe, mayar da() sannu ta hanyar amfani da fassarar() da ƙara maɓalli mai maɓalli zuwa gareshi. Bayan waɗannan matakan, aikace-aikacen zai iya "fahimtar" yaren da ake buƙata da kuma nuna saƙonni a ciki.
Kaddamar da aikace -aikace
Yanzu ne lokacin da za a duba yadda fassarar ke aiki.
Da farko, muna ƙaddamar da aikace-aikacen a cikin na'urar kwaikwayo ko emulator ta hanyar bugawa
$ react-native run-ios
$ react-native run-android
Zai yi kama da wani abu kamar haka:
Yanzu zaku iya gwada canza yaren zuwa Faransanci ta ƙaddamar da aikace-aikacen.
Haka muke yi da Larabci, babu bambanci.
Ya zuwa yanzu yana da kyau.
Amma menene zai faru idan kun zaɓi yaren da bazuwar wanda babu fassararsa a cikin aikace-aikacen?
Ya bayyana cewa aikin nemoBestLanguage shine samar da ingantacciyar fassara daga duk akwai. A sakamakon haka, za a nuna tsohon yaren.
Muna magana ne game da saitunan waya. Misali, a cikin IOS emulator zaka iya ganin tsari na harsuna.
Idan harshen da aka zaɓa ba shine yaren da aka fi so ba, nemoBestAvailableLanguage yana dawowa ba tare da fayyace shi ba domin a nuna tsohuwar harshen.
Bonus
react-native-localize yana da API wanda ke ba da dama ga ɗimbin abubuwan abubuwan harshe. Kafin ka fara aiki, .
binciken
Ana iya yin aikace-aikacen ya zama yaruka da yawa ba tare da wata matsala ba. React-native-localize babban zaɓi ne wanda ke ba ku damar faɗaɗa tushen mai amfani da app ɗin ku.
Lambar tushen aikin .
Skillbox yana ba da shawarar:
- Kwas na aiki na shekara biyu .
- Darussan kan layi .
- Kwas din shekara mai amfani .
source: www.habr.com