მრავალენოვანი აპლიკაციის დაწერა React Native-ში

პროდუქტის ლოკალიზაცია ძალიან მნიშვნელოვანია საერთაშორისო კომპანიებისთვის, რომლებიც იკვლევენ ახალ ქვეყნებსა და რეგიონებს. ანალოგიურად, ლოკალიზაცია საჭიროა მობილური აპლიკაციებისთვის. თუ დეველოპერი იწყებს საერთაშორისო გაფართოებას, მნიშვნელოვანია სხვა ქვეყნის მომხმარებლებს მისცეს შესაძლებლობა იმუშაონ ინტერფეისით მშობლიურ ენაზე. ამ სტატიაში ჩვენ შევქმნით React Native აპლიკაციას პაკეტის გამოყენებით რეაგირება-მშობლი-ლოკალიზაცია.

Skillbox გირჩევთ: საგანმანათლებლო ონლაინ კურსი "პროფესია Java Developer".
შეგახსენებთ: "Habr"-ის ყველა მკითხველისთვის - ფასდაკლება 10 რუბლიდან Skillbox-ის ნებისმიერ კურსზე ჩარიცხვისას "Habr" სარეკლამო კოდის გამოყენებით.

ინსტრუმენტები და უნარები

ამ სტატიის გასაგებად, გჭირდებათ React Native-თან მუშაობის ძირითადი უნარები. სამუშაო აპარატის პარამეტრებთან გასაცნობად, შეგიძლიათ გამოიყენეთ ოფიციალური ინსტრუქციები.

ჩვენ დაგვჭირდება პროგრამული ინსტრუმენტების შემდეგი ვერსიები:

• Node v10.15.0
• npm 6.4.1
• ნართი 1.16.0
• რეაქტიული 0.59.9
• react-native-localize 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 ობიექტებს გასაღებებით და მნიშვნელობებით. გასაღები იგივე იქნება თითოეული ენისთვის. იგი გამოიყენება აპლიკაციის მიერ ტექსტური ინფორმაციის საჩვენებლად.

მნიშვნელობა არის ტექსტი, რომელიც უნდა აჩვენოს მომხმარებელს.

ინგლისური ენა:

{"hello": "გამარჯობა სამყარო!"}

Французский

{"გამარჯობა": "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;
};

ახლა მოდით შევქმნათ აპლიკაციის კლასის კომპონენტი:

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 მოწყობილობებისთვის, რადგან კომპონენტი უნდა იყოს გამოსახული, რომ ცვლილებები შესამჩნევი იყოს.

შემდეგ თქვენ უნდა ამოიღოთ მოსმენა componentWillUnmount() მეთოდიდან.

საბოლოოდ, render() უბრუნებს hello-ს translate()-ის გამოყენებით და მასში საკვანძო პარამეტრის დამატებით. ამ ნაბიჯების შემდეგ აპლიკაციას შეეძლება „გაიგოს“ რა ენაა საჭირო და აჩვენოს მასში შეტყობინებები.

განაცხადის გაშვება

ახლა დროა შეამოწმოთ როგორ მუშაობს თარგმანი.

პირველ რიგში, ჩვენ ვიშვებთ აპლიკაციას სიმულატორში ან ემულატორში აკრეფით

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

ეს დაახლოებით ასე გამოიყურება:

ახლა შეგიძლიათ სცადოთ ენის შეცვლა ფრანგულზე აპლიკაციის გაშვებით.

არაბულთანაც იგივეს ვაკეთებთ, განსხვავება არ არის.

ჯერჯერობით კარგია.

მაგრამ რა მოხდება, თუ აირჩევთ შემთხვევით ენას, რომლის თარგმანი არ არის აპლიკაციაში?

გამოდის, რომ findBestLanguage-ის ამოცანაა უზრუნველყოს ოპტიმალური თარგმანი ყველა ხელმისაწვდომიდან. შედეგად, ნაგულისხმევი ენა გამოჩნდება.

საუბარია ტელეფონის პარამეტრებზე. მაგალითად, iOS ემულატორში შეგიძლიათ იხილოთ ენების თანმიმდევრობა.

თუ არჩეული ენა არ არის სასურველი ენა, findBestAvailableLanguage აბრუნებს განუსაზღვრელს, რათა ნაჩვენები იყოს ნაგულისხმევი ენა.

ბონუს

react-native-localize-ს აქვს API, რომელიც უზრუნველყოფს ენის ელემენტების დიდ რაოდენობაზე წვდომას. სანამ მუშაობას დაიწყებდეთ, ღირს დოკუმენტაციის შემოწმება.

დასკვნები

აპლიკაცია შეიძლება მრავალენოვანი იყოს უპრობლემოდ. React-native-localize არის შესანიშნავი ვარიანტი, რომელიც საშუალებას გაძლევთ გააფართოვოთ თქვენი აპლიკაციის მომხმარებელთა ბაზა.

პროექტის წყარო კოდი აქ არის.

Skillbox გირჩევთ:

• ორწლიანი პრაქტიკული კურსი "მე ვარ PRO ვებ დეველოპერი".
• ონლაინ კურსი "C# დეველოპერი ნულიდან".
• პრაქტიკული წლის კურსი "PHP დეველოპერი 0-დან PRO-მდე".

წყარო: www.habr.com