ProHoster > Օրագիր > ինտերնետ նորություններ > Մենք գրում ենք բազմալեզու հավելված React Native-ում

Մենք գրում ենք բազմալեզու հավելված React Native-ում

Մենք գրում ենք բազմալեզու հավելված React Native-ում

Արտադրանքի տեղայնացումը շատ կարևոր է նոր երկրներ և տարածաշրջաններ զարգացնող միջազգային ընկերությունների համար։ Նմանապես, տեղայնացումն անհրաժեշտ է բջջային հավելվածների համար: Եթե ​​մշակողը սկսում է միջազգային ընդլայնում, ապա կարևոր է այլ երկրի օգտատերերին հնարավորություն տալ աշխատել ինտերֆեյսի հետ իրենց մայրենի լեզվով: Այս հոդվածում մենք կստեղծենք React Native հավելված՝ օգտագործելով փաթեթը արձագանքել-բնիկ-տեղայնացնել.

Skillbox-ը խորհուրդ է տալիս. Ուսումնական առցանց դասընթաց «Մասնագիտություն Java ծրագրավորող».
Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

Գործիքներ և հմտություններ

Այս հոդվածը հասկանալու համար պահանջվում են React Native-ի հիմնական հմտություններ: Աշխատանքային մեքենայի կարգավորումներին ծանոթանալու համար կարող եք օգտագործել պաշտոնական հրահանգները.

Մեզ անհրաժեշտ են ծրագրային գործիքների այս տարբերակները.

  • Հանգույց v10.15.0
  • npm 6.4.1
  • մանվածք 1.16.0
  • react-native 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. ար.ջսոն արաբերեն.

Այս ֆայլերը պարունակում են ստեղներով և արժեքներով 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;
};

Դե, հիմա եկեք ստեղծենք 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 սարքերի համար, քանի որ բաղադրիչը պետք է ցուցադրվի, որպեսզի փոփոխությունները տեսանելի լինեն:

Այնուհետև մենք պետք է հեռացնենք ունկնդիրը componentWillUnmount() մեթոդից։

Վերջապես, hello-ն վերադարձվում է render()-ում՝ օգտագործելով translate()-ը և դրան ավելացնելով հիմնական պարամետր: Այս քայլերից հետո հավելվածը կկարողանա «հասկանալ», թե որ լեզուն է անհրաժեշտ և հաղորդագրություններ ցույց տալ դրանում:

Դիմումի գործարկում

Այժմ ժամանակն է ստուգելու, թե ինչպես է աշխատում թարգմանությունը:

Սկզբում մենք գործարկում ենք հավելվածը սիմուլյատորում կամ էմուլյատորում՝ մուտքագրելով

$ react-native run-ios
$ react-native run-android
Այն նման տեսք կունենա.

Մենք գրում ենք բազմալեզու հավելված React Native-ում

Այժմ կարող եք փորձել փոխել լեզուն ֆրանսերենի՝ գործարկելով հավելվածը:

Մենք գրում ենք բազմալեզու հավելված React Native-ում

Նույնը անում ենք արաբերեն լեզվով, տարբերություն չկա։

Առայժմ ամեն ինչ լավ է:

Բայց ի՞նչ կլինի, եթե ընտրեք պատահական լեզու, որը չունի թարգմանություն հավելվածում:

Պարզվում է, որ findBestLanguage-ի խնդիրն է հնարավորինս լավագույն թարգմանությունն ապահովել բոլոր հասանելիներից: Արդյունքում կցուցադրվի այն լեզուն, որը սահմանվել է լռելյայն:

Խոսքը հեռախոսի կարգավորումների մասին է։ Այսպիսով, օրինակ, iOS emulator-ում դուք կարող եք տեսնել լեզուների կարգը:

Մենք գրում ենք բազմալեզու հավելված React Native-ում

Եթե ​​ընտրված լեզուն նախընտրելի լեզուն չէ, findBestAvailableLanguage-ը վերադարձնում է չսահմանված, որպեսզի ցուցադրվի լռելյայն լեզուն:

Շահութաբաժին

react-native-localize-ն ունի API, որն ապահովում է մեծ թվով լեզվական տարրերի հասանելիություն: Նախքան աշխատանքը սկսելը, արժե կարդալ փաստաթղթերը.

Արդյունքները

Հավելվածը կարող է լինել բազմալեզու՝ առանց խնդիրների։ React-native-localize-ը հիանալի տարբերակ է, որը թույլ է տալիս ընդլայնել ձեր հավելվածի օգտատերերի շրջանակը:

Ծրագրի սկզբնական կոդը գտնվում է այստեղ.

Skillbox-ը խորհուրդ է տալիս.

Source: www.habr.com

Добавить комментарий