🥇Biz React Native | da koʻp tilli dastur yozyapmiz ProHoster

Yangi mamlakatlar va hududlarni o'rganayotgan xalqaro kompaniyalar uchun mahsulotni mahalliylashtirish juda muhimdir. Xuddi shunday, mobil ilovalar uchun mahalliylashtirish kerak. Agar dasturchi xalqaro kengayishni boshlasa, boshqa mamlakat foydalanuvchilariga o'z ona tillarida interfeys bilan ishlash imkoniyatini berish muhimdir. Ushbu maqolada biz paket yordamida React Native dasturini yaratamiz reaksiyaga kirishish-mahalliylashtirish.

Skillbox tavsiya qiladi: Ta'lim onlayn kurs "Java dasturchi kasbi".
Sizga eslatib o'tamiz: "Habr" ning barcha o'quvchilari uchun - "Habr" promo-kodidan foydalangan holda har qanday Skillbox kursiga yozilishda 10 000 rubl chegirma.

Asboblar va ko'nikmalar

Ushbu maqolani tushunish uchun sizga React Native bilan ishlashda asosiy ko'nikmalar kerak bo'ladi. Ishlaydigan mashinaning sozlamalari bilan tanishish uchun siz mumkin rasmiy ko'rsatmalardan foydalaning.

Bizga dasturiy vositalarning ushbu versiyalari kerak bo'ladi:

Tugun v10.15.0
npm 6.4.1
ip 1.16.0
reaktiv-native 0.59.9
react-native-localization 1.1.3
i18n-js 3.3.0

Ishga kirishish

Biz ingliz, frantsuz va arab tilini qo'llab-quvvatlaydigan dastur yaratamiz. Avval biz react-native-cli yordamida yangi loyiha yaratamiz. Buni amalga oshirish uchun terminalda quyidagilarni kiritishingiz kerak:

$ react-native init multiLanguage
$ CD ko'p tilli

Kerakli kutubxonalarni qo'shish

Birinchi qadam, quyidagilarni kiritish orqali react-native-localize-ni o'rnatishdir:
$ ip qo'shish reaksiya-native-localize

O'rnatish jarayonida muammolar yuzaga kelsa, O'rnatish bo'yicha qo'llanmani o'qishga arziydi.

React-native-localize kutubxonasi ishlab chiquvchiga ko'p tilli xususiyatlardan foydalanish imkonini beradi. Ammo unga yana bitta kutubxona kerak - i18n.

Ushbu maqolada foydalanish tasvirlangan I18n.js JavaScript-ga tarjimani ta'minlash uchun.

$ ip qo'shing i18n-js

Xo'sh, i18n-js keshlash yoki xotirada saqlashni ta'minlamaganligi sababli, men buning uchun lodash.memoize dan foydalanishni taklif qilaman:

$ ip qo'shing lodash.memoize

Tarjimalar bilan ishlash

Ilova boshqa tillar bilan ishlay olishi uchun avval src ichida tarjimalar katalogini, so'ngra har bir til uchun uchta JSON faylini yaratishingiz kerak.

1. ingliz tili uchun en.json;

2. frantsuz tili uchun fr.json;

3. arab tili uchun ar.json.

Ushbu fayllarda kalit va qiymatlarga ega JSON obyektlari mavjud. Kalit har bir til uchun bir xil bo'ladi. U ilova tomonidan matn ma'lumotlarini ko'rsatish uchun ishlatiladi.

Qiymat - foydalanuvchiga ko'rsatilishi kerak bo'lgan matn.

Ingliz tili:

{"salom": "Salom dunyo!"}

Frantsuzcha

{"salom": "Salut le Monde!"}

Arabskiy

{ "salom": "ạ̉hlạf bạlʿạlm"}

Xuddi shu tarzda boshqa tillarni ham qo'shishingiz mumkin.

Asosiy kod

Ushbu nuqtada siz App.js faylini ochishingiz va unga import qo'shishingiz kerak:

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";

Shundan so'ng, keyinchalik foydali bo'ladigan yordamchi funktsiyalar va doimiylar qo'shiladi.

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;
};

Endi App sinfining komponentini yaratamiz:

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
  }
});

Birinchi element, setI18nConfig(), dastlabki konfiguratsiyani o'rnatadi.

Keyin komponentDidMount() ga hodisa tinglovchisini qo'shishingiz kerak, bu element yangilanishlarni tinglaydi va ular sodir bo'lganda handleLocalizationChange() ni chaqiradi.

handleLocalizationChange() usuli setI18nConfig() va forceUpdate() ni faollashtiradi. Bu Android qurilmalari uchun zarur, chunki o'zgarishlar sezilarli bo'lishi uchun komponent ko'rsatilishi kerak.

Keyin komponentWillUnmount() usulidan tinglashni olib tashlashingiz kerak.

Nihoyat, render() translate() yordamida va unga asosiy parametr qo'shish orqali salom qaytaradi. Ushbu qadamlardan so'ng, dastur qaysi til kerakligini "tushunishi" va unda xabarlarni ko'rsatishi mumkin bo'ladi.

Ilovani ishga tushirish

Endi tarjima qanday ishlashini tekshirish vaqti keldi.

Birinchidan, dasturni simulyator yoki emulyatorda yozish orqali ishga tushiramiz

$ react-native run-ios
$ react-native run-android

Bu shunday ko'rinadi:

Endi siz dasturni ishga tushirish orqali tilni frantsuz tiliga o'zgartirishga urinib ko'rishingiz mumkin.

Arab tili bilan ham xuddi shunday qilamiz, farqi yo‘q.

Hozirgacha juda yaxshi.

Ammo dasturda tarjimasi bo'lmagan tasodifiy tilni tanlasangiz nima bo'ladi?

Ma'lum bo'lishicha, findBestLanguagening vazifasi barcha mavjud bo'lganlardan optimal tarjimani taqdim etishdir. Natijada, standart til ko'rsatiladi.

Biz telefon sozlamalari haqida gapiramiz. Misol uchun, iOS emulyatorida siz tillar tartibini ko'rishingiz mumkin.

Agar tanlangan til afzal qilingan til bo'lmasa, findBestAvailableLanguage standart til ko'rsatilishi uchun undefined qaytaradi.

bonus

react-native-localize ko'p sonli til elementlariga kirishni ta'minlaydigan APIga ega. Ishni boshlashdan oldin, Hujjatlarni ko'rib chiqishga arziydi.

topilmalar

Ilova hech qanday muammosiz ko'p tilli bo'lishi mumkin. React-native-localize - bu sizning ilovangizning foydalanuvchi bazasini kengaytirish imkonini beruvchi ajoyib imkoniyat.

Loyihaning manba kodi shu yerda.

Skillbox tavsiya qiladi:

Ikki yillik amaliy kurs "Men PRO veb-dasturchisiman".

Onlayn kurs "C# dasturchi noldan".

Amaliy yillik kurs "PHP dasturchisi 0 dan PROgacha".

Manba: www.habr.com

React Native-da ko'p tilli dastur yozish