په اصلي غبرګون کې د څو ژبو غوښتنلیک لیکل

د محصول ځایی کول د نړیوالو شرکتونو لپاره خورا مهم دي چې نوي هیوادونه او سیمې لټوي. په ورته ډول، د ګرځنده غوښتنلیکونو لپاره ځایی کولو ته اړتیا ده. که یو پرمخ وړونکی نړیوال پراختیا پیل کړي، نو دا مهمه ده چې د بل هیواد کاروونکو ته فرصت ورکړئ چې د دوی په مورنۍ ژبه کې د انٹرفیس سره کار وکړي. پدې مقاله کې ، موږ به د کڅوړې په کارولو سره د عکس العمل اصلي غوښتنلیک رامینځته کړو غبرګون-ملی- ځایی کول.

Skillbox وړاندیز کوي: تعلیمي آنلاین کورس "د جاوا پرمخ وړونکی مسلک".
موږ یادونه کوو: د ټولو هابر لوستونکو لپاره - د 10 روبل تخفیف کله چې د هابر پرومو کوډ په کارولو سره د مهارت بکس کوم کورس کې نوم لیکنه وکړئ.

وسایل او مهارتونه

د دې مقالې د پوهیدو لپاره ، تاسو د ریکټ اصلي سره کار کولو کې لومړني مهارتونو ته اړتیا لرئ. د کاري ماشین ترتیباتو سره د ځان پیژندلو لپاره، تاسو کولی شئ د رسمي لارښوونو څخه کار واخلئ.

موږ به د سافټویر وسیلو دې نسخو ته اړتیا ولرو:

• نوډ 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 څو ژبې

د اړین کتابتونونو اضافه کول

لومړی ګام دا دی چې د لاندې ټایپ کولو سره د عکس العمل-نیټیټ-لوکلیز نصب کړئ:
$ yarn add react-native-localize

که د نصب کولو پروسې په جریان کې ستونزې رامینځته شي ، دا د نصبولو لارښود لوستلو ارزښت لري.

د عکس العمل - ځایی کتابتون پراختیا کونکي ته څو ژبو ځانګړتیاو ته لاسرسی ورکوي. مګر هغه یو بل کتابتون ته اړتیا لري - i18n.

دا مقاله د کارولو تشریح کوي I18n.js په جاواسکریپټ کې د ژباړې چمتو کولو لپاره.

$ yarn i18n-js اضافه کړئ

ښه، له هغه ځایه چې i18n-js کیشینګ یا یادداشت نه وړاندې کوي، زه د دې لپاره د lodash.memoize کارولو وړاندیز کوم:

$ yarn add lodash.memoize

د ژباړې سره کار کول

د دې لپاره چې غوښتنلیک د نورو ژبو سره د کار کولو وړ وي، تاسو باید لومړی د src دننه د ژباړې لارښود جوړ کړئ، بیا د هرې ژبې لپاره درې JSON فایلونه.

1. en.json د انګلیسي لپاره؛

2. د فرانسوي لپاره fr.json؛

3. د عربي لپاره ar.json.

دا فایلونه د کیلي او ارزښتونو سره JSON توکي لري. کلید به د هرې ژبې لپاره یو شان وي. دا د غوښتنلیک لخوا د متن معلوماتو ښودلو لپاره کارول کیږي.

ارزښت هغه متن دی چې باید کارونکي ته وښودل شي.

انګلیسي:

{"سلام": "سلام نړۍ!"}

فرانسيسي

{"سلام": "سلام لی مونډ!"}

عربي

{"سلام": "أهلاً بالعالم"}

تاسو کولی شئ په ورته ډول نورې ژبې اضافه کړئ.

اصلي کوډ

پدې مرحله کې ، تاسو اړتیا لرئ د 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() د ژباړې () په کارولو او دې ته د کلیدي پیرامیټر اضافه کولو سره هیلو بیرته راګرځي. د دې ګامونو وروسته، غوښتنلیک به وکوالی شي "پوه شي" چې کومې ژبې ته اړتیا ده او په دې کې پیغامونه ښکاره کړي.

د غوښتنلیک پیل کول

اوس وخت دی چې وګورو چې ژباړه څنګه کار کوي.

لومړی، موږ غوښتنلیک په سمیلیټر یا ایمولیټر کې د ټایپ کولو له لارې پیل کوو

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

دا به یو څه داسې ښکاري:

اوس تاسو کولی شئ د غوښتنلیک په پیل کولو سره فرانسوي ته ژبه بدلولو هڅه وکړئ.

له عربي سره ورته کار کوو، هیڅ توپیر نشته.

تر دې دمه ډیر ښه.

مګر څه پیښیږي که تاسو یوه تصادفي ژبه غوره کړئ د کوم لپاره چې په غوښتنلیک کې هیڅ ژباړه شتون نلري؟

دا معلومه شوه چې د FindBestLanguage دنده د ټولو موجودو څخه غوره ژباړه چمتو کول دي. د پایلې په توګه، اصلي ژبه به ښکاره شي.

موږ د تلیفون تنظیماتو په اړه خبرې کوو. د مثال په توګه، په iOS ایمولیټر کې تاسو کولی شئ د ژبو ترتیب وګورئ.

که ټاکل شوې ژبه د خوښې ژبه نه وي، FindBestAvailableLanguage بیرته نه تعریف شوي ترڅو اصلي ژبه وښودل شي.

بونس

react-native-localize یو API لري چې د ژبې ډیری عناصرو ته لاسرسی چمتو کوي. مخکې له دې چې تاسو کار پیل کړئ، دا د اسنادو د کتلو ارزښت لري.

موندنو

غوښتنلیک له کومې ستونزې پرته څو ژبی کیدی شي. React-native-localize یو عالي اختیار دی چې تاسو ته اجازه درکوي د خپل اپلیکیشن کارونکي اساس پراخه کړئ.

د پروژې سرچینې کوډ دلته دی.

Skillbox وړاندیز کوي:

• دوه کلن عملي کورس "زه د پرو ویب جوړونکی یم".
• آنلاین کورس "C# پراختیا کونکی له پیل څخه".
• یو کلن عملي کورس "د پی ایچ پی جوړونکی له 0 څخه تر پرو".

سرچینه: www.habr.com