React Native တွင် ဘာသာစကားပေါင်းစုံ အပလီကေးရှင်းကို ရေးသားခြင်း။

နိုင်ငံနှင့် ဒေသအသစ်များကို ရှာဖွေနေသော နိုင်ငံတကာကုမ္ပဏီများအတွက် ထုတ်ကုန်ဒေသသတ်မှတ်ခြင်းသည် အလွန်အရေးကြီးပါသည်။ အလားတူ၊ မိုဘိုင်းအပလီကေးရှင်းများအတွက် ဒေသန္တရပြုရန် လိုအပ်ပါသည်။ developer တစ်ဦးသည် နိုင်ငံတကာ တိုးချဲ့မှုကို စတင်ပါက၊ အခြားနိုင်ငံမှ သုံးစွဲသူများအား ၎င်းတို့၏ မိခင်ဘာသာစကားဖြင့် အင်တာဖေ့စ်နှင့် အလုပ်လုပ်ရန် အခွင့်အရေး ပေးရန် အရေးကြီးပါသည်။ ဤဆောင်းပါးတွင်၊ အထုပ်ကိုအသုံးပြု၍ React Native အပလီကေးရှင်းတစ်ခုဖန်တီးပါမည်။ react-native-localize.

Skillbox မှ အကြံပြုထားသည်- ပညာရေးအွန်လိုင်းသင်တန်း "Profession Java developer".
ငါတို့မင်းကိုသတိပေးတယ် "Habr" ၏စာဖတ်သူအားလုံးအတွက် - "Habr" ပရိုမိုးရှင်းကုဒ်ကို အသုံးပြု၍ မည်သည့် Skillbox သင်တန်းတွင်စာရင်းသွင်းသည့်အခါ 10 ရူဘယ်လျှော့စျေး။

ကိရိယာများနှင့် ကျွမ်းကျင်မှုများ

ဤဆောင်းပါးကို နားလည်ရန်၊ React Native နှင့် လုပ်ဆောင်ရာတွင် အခြေခံကျွမ်းကျင်မှုများ လိုအပ်ပါသည်။ အလုပ်လုပ်သည့်စက်၏ ဆက်တင်များကို သင်ကိုယ်တိုင် ရင်းနှီးစေရန်၊ တရားဝင်ညွှန်ကြားချက်ကိုသုံးပါ။.

ကျွန်ုပ်တို့သည် ဤဆော့ဖ်ဝဲလ်ကိရိယာများ၏ ဗားရှင်းများ လိုအပ်ပါမည်-

• Node v10.15.0
• npm 6.4.1
• ချည် ၁.၁၆.၀
• တုံ့ပြန်မှု-ဇာတိ 0.59.9
• react-native-localize ၁.၁.၃
• i18n-js 3.3.0

စတင်

ကျွန်ုပ်တို့သည် အင်္ဂလိပ်၊ ပြင်သစ်နှင့် အာရဗီများကို ပံ့ပိုးပေးမည့် အက်ပ်တစ်ခုကို ဖန်တီးပါမည်။ ပထမဦးစွာ react-native-cli ကို အသုံးပြု၍ ပရောဂျက်အသစ်တစ်ခုကို ဖန်တီးပါ။ ဒါကိုလုပ်ဖို့၊ terminal မှာ ဒါကို ရိုက်ထည့်ဖို့ လိုပါတယ်။

$ react-native init multiLanguage
$cd multiLanguage

လိုအပ်သော စာကြည့်တိုက်များ ထည့်သွင်းခြင်း။

ပထမအဆင့်မှာ အောက်ပါတို့ကို ရိုက်ထည့်ခြင်းဖြင့် react-native-localize ကို ထည့်သွင်းရန်ဖြစ်သည်-
$ yarn တွင် react-native-localize ထည့်ပါ။

တပ်ဆင်ခြင်းလုပ်ငန်းစဉ်အတွင်း ပြဿနာများဖြစ်ပေါ်ပါက၊ တပ်ဆင်မှုလက်စွဲစာအုပ်ကိုဖတ်ရကျိုးနပ်သည်။.

react-native-localize library သည် developer အား ဘာသာစကားပေါင်းစုံ ဝန်ဆောင်မှုများကို အသုံးပြုခွင့်ပေးသည်။ သို့သော် သူမသည် နောက်ထပ်စာကြည့်တိုက်တစ်ခု လိုအပ်သည် - i18n။

ဤဆောင်းပါးတွင်အသုံးပြုပုံကိုဖော်ပြသည်။ I18n.js JavaScript သို့ ဘာသာပြန်ဆိုနိုင်ရန်။

$ yarn i18n-js ထည့်ပါ။

ကောင်းပြီ၊ i18n-js သည် caching သို့မဟုတ် memoization ကိုမပေးသောကြောင့်၊ ၎င်းအတွက် lodash.memoize ကိုအသုံးပြုရန်အကြံပြုပါသည်။

$yarn တွင် lodash.memoize ထည့်ပါ။

ဘာသာပြန်တွေနဲ့ အလုပ်လုပ်တယ်။

အပလီကေးရှင်းသည် အခြားဘာသာစကားများဖြင့် အလုပ်လုပ်နိုင်စေရန်အတွက်၊ သင်သည် ဦးစွာ src အတွင်းရှိ ဘာသာပြန်ဆိုမှုလမ်းညွှန်တစ်ခုကို ဖန်တီးပြီးနောက် ဘာသာစကားတစ်ခုစီအတွက် JSON ဖိုင်သုံးခုကို ဖန်တီးရန် လိုအပ်သည်။

အင်္ဂလိပ်အတွက် 1. en.json;

ပြင်သစ်အတွက် 2. fr.json;

3. အာရဗီအတွက် ar.json

ဤဖိုင်များတွင် သော့များနှင့် တန်ဖိုးများပါရှိသော JSON အရာများ ပါဝင်သည်။ သော့သည် ဘာသာစကားတစ်ခုစီအတွက် တူညီမည်ဖြစ်သည်။ စာသားအချက်အလက်ကိုပြသရန်အပလီကေးရှင်းမှအသုံးပြုသည်။

တန်ဖိုးသည် အသုံးပြုသူအား ပြသရန် လိုအပ်သော စာသားဖြစ်သည်။

အင်္ဂလိပ်:

{"hello": "Hello World!"}

ပြင်သစ်

{"hello": "နှုတ်ဆက်တယ်လေ Monde!"}

Arabic အဘိဓါန်

{"မင်္ဂလာပါ"- "أهلاً بالعالم"}

အခြားဘာသာစကားများကို အလားတူနည်းဖြင့် ထည့်နိုင်သည်။

ပင်မကုဒ်

ဤအချိန်တွင် သင်သည် 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 class ရဲ့ အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးလိုက်ရအောင်။

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() method မှ ဖယ်ရှားရန် လိုအပ်သည်။

နောက်ဆုံးတွင်၊ render() သည် translate() ကိုအသုံးပြုပြီး ၎င်းတွင် key parameter ကိုထည့်ခြင်းဖြင့် hello ပြန်ပေးသည်။ ဤအဆင့်များပြီးနောက်၊ အပလီကေးရှင်းသည် မည်သည့်ဘာသာစကား လိုအပ်သည်ကို “နားလည်” နိုင်ပြီး ၎င်းတွင် မက်ဆေ့ချ်များကို ပြသနိုင်မည်ဖြစ်သည်။

လျှောက်လွှာတင်ခြင်း

ယခုအချိန်သည် ဘာသာပြန်ခြင်း၏ အလုပ်လုပ်ပုံကို စစ်ဆေးရမည့်အချိန်ဖြစ်သည်။

ဦးစွာ၊ ကျွန်ုပ်တို့သည် စာရိုက်ခြင်းဖြင့် Simulator သို့မဟုတ် emulator တွင် အပလီကေးရှင်းကို စတင်လိုက်ပါ။

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

၎င်းသည်ဤကဲ့သို့သောပုံရသည်-

ယခု သင်သည် အက်ပ်လီကေးရှင်းကို စတင်ခြင်းဖြင့် ဘာသာစကားကို ပြင်သစ်သို့ ပြောင်းလဲရန် ကြိုးစားနိုင်ပါပြီ။

ကျွန်ုပ်တို့သည် အာရပ်ဘာသာနှင့် အတူတူပင်ဖြစ်ပြီး ကွာခြားမှုမရှိပါ။

ယခုအထိတော့အဆင်ပြေတုန်းပဲ။

သို့သော် အပလီကေးရှင်းတွင် ဘာသာပြန်ခြင်းမရှိသော ကျပန်းဘာသာစကားတစ်ခုကို သင်ရွေးချယ်ပါက ဘာဖြစ်မည်နည်း။

findBestLanguage ၏တာဝန်မှာ ရနိုင်သောအားလုံးမှ အကောင်းဆုံးဘာသာပြန်ဆိုမှုကို ပေးဆောင်ရန်ဖြစ်ကြောင်း ထင်ရှားပါသည်။ ရလဒ်အနေဖြင့် မူရင်းဘာသာစကားကို ပြသမည်ဖြစ်သည်။

ဖုန်းဆက်တင်များအကြောင်း ပြောနေပါသည်။ ဥပမာအားဖြင့်၊ iOS emulator တွင် ဘာသာစကားများ၏ အစီအစဥ်ကို သင်မြင်နိုင်သည်။

ရွေးချယ်ထားသောဘာသာစကားသည် နှစ်သက်ရာဘာသာစကားမဟုတ်ပါက၊ findBestAvailableLanguage သည် သတ်မှတ်မထားသောဘာသာစကားကို ပြရန်အတွက် မူရင်းဘာသာစကားကိုပြသရန်အတွက် သတ်မှတ်မထားသောဘာသာစကားကို ပြန်ပေးသည်။

ဆုငှေ

react-native-localize တွင် ဘာသာစကား အများအပြားကို ဝင်ရောက်ခွင့် ပေးသည့် API တစ်ခု ရှိသည်။ အလုပ်မစခင်၊ စာရွက်စာတမ်းတွေကို စစ်ဆေးကြည့်ရတာ တန်ပါတယ်။.

တွေ့ရှိချက်များ

အပလီကေးရှင်းကို ပြဿနာမရှိဘဲ ဘာသာစကားမျိုးစုံဖြင့် ပြုလုပ်နိုင်သည်။ React-native-localize သည် သင့်အက်ပ်၏အသုံးပြုသူအခြေခံကို ချဲ့ထွင်နိုင်စေမည့် အကောင်းဆုံးရွေးချယ်မှုတစ်ခုဖြစ်သည်။

ပရောဂျက်အရင်းအမြစ်ကုဒ် ဒီမှာ.

Skillbox မှ အကြံပြုထားသည်-

• နှစ်နှစ်စာလက်တွေ့သင်တန်း "ကျွန်တော်က PRO ဝဘ် developer တစ်ယောက်ပါ".
• အွန်လိုင်းသင်တန်း "C# developer".
• လက်တွေ့ တစ်နှစ်သင်တန်း "PHP developer 0 မှ PRO".

source: www.habr.com