Yeni ölkələr və regionlar inkişaf etdirən beynəlxalq şirkətlər üçün məhsulların lokallaşdırılması çox vacibdir. Eynilə, mobil proqramlar üçün lokalizasiya lazımdır. Tərtibatçı beynəlxalq genişlənməyə başlayırsa, başqa ölkədən olan istifadəçilərə ana dilində interfeyslə işləmək imkanı vermək vacibdir. Bu yazıda paketdən istifadə edərək React Native proqramı yaradacağıq .
Skillbox tövsiyə edir: Onlayn təhsil kursu .
Xatırladırıq: "Habr" ın bütün oxucuları üçün - "Habr" promosyon kodundan istifadə edərək hər hansı bir Skillbox kursuna yazılarkən 10 000 rubl endirim.
Alətlər və bacarıqlar
Bu məqaləni başa düşmək üçün əsas React Native bacarıqları tələb olunur. İşləyən maşının parametrləri ilə tanış olmaq üçün edə bilərsiniz .
Proqram vasitələrinin bu versiyalarına ehtiyacımız var:
- Node v10.15.0
- npm 6.4.1
- iplik 1.16.0
- reaksiya-doğma 0.59.9
- reaksiya-doğma-lokallaşdırmaq 1.1.3
- i18n-js 3.3.0
Başlanğıc
Biz ingilis, fransız və ərəb dilini dəstəkləyəcək proqram yaradacağıq. Əvvəlcə react-native-cli istifadə edərək yeni layihə yaradırıq. Bunu etmək üçün terminalda bunu yazmalısınız:
$ reaksiya-doğma init multiLanguage
$ cd çoxdilli
Tələb olunan kitabxanaların əlavə edilməsi
İlk addım aşağıdakıları yazaraq react-native-localize quraşdırmaqdır:
$ iplik əlavə reaksiya-doğma-lokallaşdırmaq
Quraşdırma zamanı problemlərlə qarşılaşsanız, .
Reaksiya-doğma-lokalizasiya kitabxanası tərtibatçıya çoxdilli xüsusiyyətlərə giriş imkanı verir. Amma ona başqa bir kitabxana lazımdır - i18n.
Məqalə istifadəni təsvir edir JavaScript-də tərcüməni təmin etmək üçün.
$ iplik əlavə i18n-js
Yaxşı, i18n-js keşləmə və ya yadda saxlama təmin etmədiyi üçün bunun üçün lodash.memoize istifadə etməyi təklif edirəm:
$ iplik əlavə edin lodash.memoize
Tərcümələrlə işləmək
Tətbiqin digər dillərlə işləməsi üçün əvvəlcə src daxilində tərcümələr kataloqu, sonra hər dil üçün üç JSON faylı yaratmalısınız.
1. İngilis dili üçün en.json;
2. Fransız dili üçün fr.json;
3. Ərəb dili üçün ar.json.
Bu fayllar açarları və dəyərləri olan JSON obyektlərini ehtiva edir. Açar hər dil üçün eyni olacaq. Mətn məlumatlarını göstərmək üçün proqram tərəfindən istifadə olunur.
Dəyər (dəyər) istifadəçiyə göstərilməli olan mətndir.
İngilis dili:
{ "salam": "Salam Dünya!"}
Французский
{ "salam": "Salut le Monde!"}
Арабский
{ "salam": "أهلاً بالعالم"}
Digər dillər də eyni şəkildə əlavə edilə bilər.
Əsas kod
Bu nöqtədə siz App.js faylını açmalı və ona idxal əlavə etməlisiniz:
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";Bundan sonra köməkçi funksiyalar və sabitlər əlavə olunur ki, bu da sonradan faydalı olacaq.
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;
};Yaxşı, indi App sinifinin bir komponentini yaradaq:
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
}
});Birinci element, setI18nConfig(), ilkin konfiqurasiyanı təyin edir.
Sonra komponentDidMount() -a hadisə dinləyicisi əlavə etməliyik, bu element yeniləmələri dinləyəcək və onlar baş verdikdə handleLocalizationChange() funksiyasını çağıracaq.
handleLocalizationChange() metodu setI18nConfig() və forceUpdate() funksiyalarını işə salır. Bu, Android cihazları üçün lazımdır, çünki dəyişikliklərin görünməsi üçün komponent göstərilməlidir.
Sonra komponentWillUnmount() metodundan dinləyicini silməliyik.
Nəhayət, translate() istifadə edərək və ona əsas parametr əlavə etməklə render() funksiyasında salam qaytarılır. Bu addımlardan sonra proqram hansı dilin lazım olduğunu "başa düşə" və içindəki mesajları göstərə biləcək.
Tətbiqin işə salınması
İndi tərcümənin necə işlədiyini yoxlamağın vaxtıdır.
Əvvəlcə proqramı yazaraq simulyatorda və ya emulyatorda işə salırıq
$ reaksiya-doğma run-ios
$ reaksiya-doğma run-android
Bu kimi bir şey görünəcək:
İndi proqramı işə salmaqla dili fransız dilinə dəyişməyə cəhd edə bilərsiniz.
Ərəb dili ilə də eyni şeyi edirik, heç bir fərq yoxdur.
Hələlik hər şey yaxşı gedir.
Bəs proqramda tərcüməsi olmayan təsadüfi bir dil seçsəniz nə olar?
Məlum oldu ki, findBestLanguage-in vəzifəsi bütün mövcud olanlar arasında mümkün olan ən yaxşı tərcüməni təmin etməkdir. Nəticədə, standart olaraq təyin edilmiş dil göstərilir.
Söhbət telefon parametrlərindən gedir. Beləliklə, məsələn, iOS emulyatorunda dillərin sırasını görə bilərsiniz.
Seçilmiş dil üstünlük verilən dil deyilsə, findBestAvailableLanguage qeyri-müəyyənliyi qaytarır ki, standart dil göstərilsin.
Mükafat
react-native-localize çoxlu sayda dil elementlərinə girişi təmin edən API-yə malikdir. İşə başlamazdan əvvəl, .
Tapıntılar
Tətbiq heç bir problem olmadan çoxdilli edilə bilər. React-native-localize tətbiqinizin istifadəçilərinin dairəsini genişləndirməyə imkan verən əla seçimdir.
Layihənin mənbə kodu .
Skillbox tövsiyə edir:
- İki illik praktik kurs .
- Onlayn kurs .
- Praktiki il kursu .
Mənbə: www.habr.com