React Native тілінде көптілді қосымшаны жазу

Жаңа елдер мен аймақтарды зерттейтін халықаралық компаниялар үшін өнімді оқшаулау өте маңызды. Сол сияқты, мобильді қосымшалар үшін локализация қажет. Егер әзірлеуші ​​халықаралық кеңейтуді бастаса, басқа елдің пайдаланушыларына ана тілінде интерфейспен жұмыс істеу мүмкіндігін беру маңызды. Бұл мақалада пакетті пайдаланып React Native қолданбасын жасаймыз реактивті-жергілікті-локализация.

Skillbox ұсынады: Білім беру онлайн курсы «Мамандығы Java әзірлеушісі».
Біз еске саламыз: «Хабрдың» барлық оқырмандары үшін - «Habr» жарнамалық кодын пайдаланып кез келген Skillbox курсына жазылу кезінде 10 000 рубль көлемінде жеңілдік.

Құралдар мен дағдылар

Бұл мақаланы түсіну үшін сізге React Native бағдарламасымен жұмыс істеудің негізгі дағдылары қажет. Жұмыс машинасының параметрлерімен танысу үшін сіз аласыз ресми нұсқауларды пайдаланыңыз.

Бізге бағдарламалық құралдардың мына нұсқалары қажет болады:

• Түйін v10.15.0
• npm 6.4.1
• жіп 1.16.0
• реактивті 0.59.9
• реактивті-жергілікті-локализация 1.1.3
• i18n-js 3.3.0

Жұмысты бастау

Біз ағылшын, француз және араб тілін қолдайтын қосымша жасаймыз. Алдымен react-native-cli көмегімен жаңа жоба жасаймыз. Ол үшін терминалда мынаны теру керек:

$ react-native init multiLanguage
$ CD көп тіл

Қажетті кітапханаларды қосу

Бірінші қадам келесіні теру арқылы react-native-localize орнату болып табылады:
$ иірілген жіп қосу реакция-негіз-локализация

Орнату процесінде проблемалар туындаса, Орнату нұсқаулығын оқыған жөн.

React-native-localize кітапханасы әзірлеушіге көптілді мүмкіндіктерге қол жеткізуге мүмкіндік береді. Бірақ оған тағы бір кітапхана керек - i18n.

Бұл мақалада пайдалану сипатталған I18n.js JavaScript тіліне аударуды қамтамасыз ету үшін.

$ жіп i18n-js қосыңыз

i18n-js кэштеуді немесе есте сақтауды қамтамасыз етпегендіктен, мен бұл үшін lodash.memoize пайдалануды ұсынамын:

$ жіп lodash.memoize қосыңыз

Аудармалармен жұмыс

Қолданба басқа тілдермен жұмыс істей алуы үшін алдымен src ішінде аудармалар каталогын, содан кейін әр тіл үшін үш JSON файлын жасау керек.

1. ағылшын тіліне арналған en.json;

2. француз тіліне арналған fr.json;

3. араб тіліне арналған ar.json.

Бұл файлдарда кілттері мен мәндері бар JSON нысандары бар. Әр тіл үшін кілт бірдей болады. Оны қолданба мәтіндік ақпаратты көрсету үшін пайдаланады.

Мән – пайдаланушыға көрсетілуі қажет мәтін.

Ағылшын тілі:

{"hello": "Hello World!"}

Француз тілі

{"сәлем": "Salut le Monde!"}

Араб

{ "сәлем": "أهلاً بالعالم"}

Басқа тілдерді де дәл осылай қосуға болады.

Негізгі код

Осы кезде App.js файлын ашып, оған импорттауды қосу керек:

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

Осыдан кейін көмекші функциялар мен тұрақтылар қосылады, олар кейінірек пайдалы болады.

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

Енді 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
  }
});

Бірінші элемент, setI18nConfig(), бастапқы конфигурацияны орнатады.

Одан кейін оқиға тыңдаушысын componentDidMount() қызметіне қосу керек, бұл элемент жаңартуларды тыңдайды және олар болған кезде handleLocalizationChange() шақырады.

handleLocalizationChange() әдісі setI18nConfig() және forceUpdate() белсендіреді. Бұл Android құрылғылары үшін қажет, себебі өзгертулер байқалуы үшін құрамдас көрсетілуі керек.

Содан кейін компонентWillUnmount() әдісінен тыңдауды жою керек.

Соңында, render() translate() функциясын пайдаланып, оған негізгі параметрді қосу арқылы сәлемді қайтарады. Осы қадамдардан кейін қолданба қай тіл қажет екенін «түсініп», ондағы хабарламаларды көрсете алады.

Қолданбаны іске қосу

Енді аударманың қалай жұмыс істейтінін тексеретін кез келді.

Алдымен теру арқылы бағдарламаны симуляторда немесе эмуляторда іске қосамыз

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

Ол келесідей болады:

Енді қолданбаны іске қосу арқылы тілді француз тіліне өзгертуге болады.

Араб тілімен де солай істейміз, айырмашылығы жоқ.

Барлығы ойдығыдай.

Бірақ қолданбада аудармасы жоқ кездейсоқ тілді таңдасаңыз не болады?

findBestLanguage-тің міндеті - барлық қолжетімді аудармалардан оңтайлы аударманы қамтамасыз ету. Нәтижесінде әдепкі тіл көрсетіледі.

Біз телефон параметрлері туралы айтып отырмыз. Мысалы, iOS эмуляторында тілдердің ретін көруге болады.

Таңдалған тіл таңдаулы тіл болмаса, findBestAvailableLanguage әдепкі тіл көрсетілу үшін анықталмағанды ​​қайтарады.

сыйақы

react-native-localize тіл элементтерінің үлкен санына қол жеткізуді қамтамасыз ететін API бар. Жұмысты бастамас бұрын, Құжаттаманы тексерген жөн.

қорытындылар

Қолданбаны ешбір қиындықсыз көптілді жасауға болады. React-native-localize - қолданбаның пайдаланушы базасын кеңейтуге мүмкіндік беретін тамаша опция.

Жобаның бастапқы коды осында.

Skillbox ұсынады:

• Екі жылдық практикалық курс «Мен PRO веб-әзірлеушісімін».
• Онлайн курс «Нөлден бастап C# әзірлеушісі».
• Практикалық курс «0-ден PRO-ге дейінгі PHP әзірлеушісі».

Ақпарат көзі: www.habr.com