Мо дар React Native як замимаи бисёрзабона менависем

Маҳалликунонии маҳсулот барои ширкатҳои байналмилалӣ, ки кишварҳо ва минтақаҳои навро инкишоф медиҳанд, хеле муҳим аст. Ба ҳамин монанд, барои барномаҳои мобилӣ маҳаллӣсозӣ лозим аст. Агар таҳиякунанда тавсеаи байналмилалиро оғоз кунад, муҳим аст, ки ба корбарон аз кишвари дигар имконият диҳад, ки бо интерфейс бо забони модарии худ кор кунанд. Дар ин мақола, мо бо истифода аз баста як барномаи React Native эҷод мекунем реакционй-махаллй.

Skillbox тавсия медиҳад: Курси онлайни таълимӣ "Касби Java Developer".
Мо ба шумо хотиррасон мекунем: барои ҳамаи хонандагони "Habr" - тахфифи 10 000 рубл ҳангоми номнавис шудан ба курсҳои Skillbox бо истифода аз рамзи таблиғотии "Habr".

Воситаҳо ва малакаҳо

Фаҳмидани ин мақола малакаҳои асосии 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

Агар шумо ҳангоми насбкунӣ бо мушкилот рӯ ба рӯ шавед, дастури насбкуниро тафтиш кунед.

Китобхонаи 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 бо калидҳо ва арзишҳо мебошанд. Калид барои ҳар як забон якхела хоҳад буд. Он аз ҷониби барнома барои намоиши иттилооти матнӣ истифода мешавад.

Арзиш (арзиш) матнест, ки бояд ба корбар нишон дода шавад.

Забони англисӣ:

{ "салом": "Салом ҷаҳон!"}

Фаронса

{ "салом": "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 (), конфигуратсияи ибтидоиро муқаррар мекунад.

Пас мо бояд як шунавандаи ҳодисаро ба komponentDidMount() илова кунем, ин элемент навсозиҳоро гӯш мекунад ва ҳангоми рух додани онҳо handleLocalizationChange() -ро даъват мекунад.

Усули handleLocalizationChange() setI18nConfig() ва forceUpdate() -ро даъват мекунад. Ин барои дастгоҳҳои Android зарур аст, зеро ҷузъ бояд барои намоён шудани тағирот иҷро карда шавад.

Пас мо бояд шунавандаро аз усули компонентWillUnmount() хориҷ кунем.

Дар ниҳоят, салом дар render() бо истифода аз translate() ва илова кардани параметри калидӣ ба он баргардонида мешавад. Пас аз ин қадамҳо, барнома метавонад "фаҳмад", ки кадом забон лозим аст ва паёмҳоро дар он нишон диҳад.

Оғози барнома

Ҳоло вақти он расидааст, ки тарҷума чӣ гуна кор мекунад.

Аввалан мо барномаро дар симулятор ё эмулятор тавассути чоп кардан иҷро мекунем

$ реаксия-модарии run-ios
$ react-native run-android

Он чизе монанди ин хоҳад буд:

Акнун шумо метавонед бо оғози барнома кӯшиш кунед, ки забонро ба фаронсавӣ иваз кунед.

Мо бо забони арабӣ ҳамин хел мекунем, ҳеҷ тафовуте нест.

То хол ҳама чиз хуб аст.

Аммо агар шумо забони тасодуфиро интихоб кунед, ки дар барнома тарҷума надорад, чӣ мешавад?

Маълум мешавад, ки вазифаи findBestLanguage таъмин намудани тарҷумаи беҳтарини имконпазир дар байни ҳама дастрас аст. Дар натиҷа, забоне, ки бо нобаёнӣ муқаррар шудааст, намоиш дода мешавад.

Ин дар бораи танзимоти телефон аст. Ҳамин тавр, масалан, дар эмулятори iOS, шумо метавонед тартиби забонҳоро бубинед.

Агар забони интихобшуда забони афзалиятнок набошад, findBestAvailableLanguage номуайянро бармегардонад, то забони пешфарз нишон дода шавад.

Бонус

react-native-localize дорои API мебошад, ки дастрасӣ ба миқдори зиёди унсурҳои забонро таъмин мекунад. Пеш аз оғози кор, хондани хуччатхо меарзад.

натиҷаҳои

Барномаро бе ягон мушкилот бисёрзабонӣ кардан мумкин аст. React-native-localize як варианти олие мебошад, ки ба шумо имкон медиҳад доираи корбарони барномаи худро васеъ кунед.

Рамзи сарчашмаи лоиҳа дар ин ҷо ҷойгир аст.

Skillbox тавсия медиҳад:

• Курси дусолаи амалй "Ман таҳиягари веби PRO ҳастам".
• Курси онлайн "Таҳиягари C # аз сифр".
• Курси солонаи амалӣ "Таҳиягари PHP аз 0 то PRO".

Манбаъ: will.com