🥇Бид React Native | дээр олон хэлээр ярьдаг програм бичиж байна ProHoster

Шинэ улс орон, бүс нутгийг судалж буй олон улсын компаниудын хувьд бүтээгдэхүүнийг нутагшуулах нь маш чухал юм. Үүний нэгэн адил, гар утасны програмуудад нутагшуулах шаардлагатай. Хэрэв хөгжүүлэгч олон улсын хэмжээнд өргөжин тэлж эхэлбэл өөр улсын хэрэглэгчдэд эх хэлээрээ интерфэйстэй ажиллах боломжийг олгох нь чухал юм. Энэ нийтлэлд бид багцыг ашиглан React Native програм үүсгэх болно урвалд орох-уугуул нутагшуулах.

Skillbox зөвлөж байна: Боловсролын онлайн курс "Мэргэжил Java хөгжүүлэгч".
Бид танд сануулж байна: "Хабр" -ын бүх уншигчдад - "Habr" сурталчилгааны кодыг ашиглан Skillbox-ын аль ч курст бүртгүүлэхдээ 10 рублийн хөнгөлөлт.

Хэрэгсэл, ур чадвар

Энэ нийтлэлийг ойлгохын тулд танд 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 төхөөрөмжүүдэд зайлшгүй шаардлагатай.

Дараа нь та komponentWillUnmount() аргаас сонсохыг устгах хэрэгтэй.

Эцэст нь, translate()-г ашиглан render() нь сайн байна уу гэсэн утгыг буцааж, түүнд гол параметр нэмдэг. Эдгээр алхмуудыг хийсний дараа програм нь ямар хэл хэрэгтэйг "ойлгож", дотор нь мессеж харуулах боломжтой болно.

Програмыг эхлүүлэх

Одоо орчуулга хэрхэн явагддагийг шалгах цаг болжээ.

Эхлээд бид програмыг симулятор эсвэл эмулятор дээр бичих замаар ажиллуулна

$ react-native run-ios
$ урвалд орох-уугуул ажиллуулах-андройд

Энэ нь иймэрхүү харагдах болно:

Одоо та програмыг ажиллуулснаар хэлээ франц хэл рүү өөрчлөхийг оролдож болно.

Бид араб хэлтэй ижил зүйлийг хийдэг, ялгаа байхгүй.

Одоогоор маш сайн.

Хэрэв та програмын орчуулгагүй санамсаргүй хэлийг сонговол яах вэ?

FindBestLanguage-ийн даалгавар бол байгаа бүх орчуулгаас оновчтой орчуулгыг өгөх явдал юм. Үүний үр дүнд анхдагч хэлийг харуулах болно.

Бид утасны тохиргооны талаар ярьж байна. Жишээлбэл, iOS эмулятор дээр та хэлний дарааллыг харж болно.

Хэрэв сонгосон хэл нь сонгосон хэл биш бол findBestAvailableLanguage нь тодорхойгүй буцаана, ингэснээр өгөгдмөл хэлийг харуулна.

Шагнал

react-native-localize нь олон тооны хэлний элементүүдэд хандах боломжийг олгодог API-тай. Ажил эхлэхийн өмнө, Баримт бичгийг шалгах нь зүйтэй.

үр дүн нь

Програмыг ямар ч асуудалгүйгээр олон хэлээр хийх боломжтой. React-native-localize нь програмынхаа хэрэглэгчийн баазыг өргөжүүлэх боломжийг олгодог гайхалтай сонголт юм.

Төслийн эх код энд байна.

Skillbox зөвлөж байна:

Хоёр жилийн практик сургалт "Би PRO вэб хөгжүүлэгч".

Онлайн курс "Эхнээс нь C# хөгжүүлэгч".

Практик жилийн курс "0-ээс PRO хүртэл PHP хөгжүүлэгч".

Эх сурвалж: www.habr.com

React Native дээр олон хэл дээрх програм бичих