React Native ۾ هڪ گهڻ لساني ايپليڪيشن لکڻ

پراڊڪٽ لوڪلائيزيشن بين الاقوامي ڪمپنين لاءِ تمام ضروري آهي جيڪي نون ملڪن ۽ علائقن کي ڳولي رهيا آهن. ساڳئي طرح، موبائل ايپليڪيشنن لاء لوڪلائيزيشن جي ضرورت آهي. جيڪڏهن هڪ ڊولپر بين الاقوامي توسيع شروع ڪري ٿو، اهو ضروري آهي ته ڪنهن ٻئي ملڪ جي استعمال ڪندڙن کي انهن جي مادري زبان ۾ انٽرفيس سان ڪم ڪرڻ جو موقعو ڏيو. هن آرٽيڪل ۾، اسان پيڪيج استعمال ڪندي هڪ رد عمل اصلي ايپليڪيشن ٺاهينداسين رد عمل- ڏيهي- مقامي ڪرڻ.

Skillbox سفارش ڪري ٿو: تعليمي آن لائين ڪورس "پروفيشنل جاوا ڊولپر".
اسان توهان کي ياد ڏياريون ٿا: "Habr" جي سڀني پڙهندڙن لاءِ - 10 روبل جي رعايت جڏهن "Habr" پروموشنل ڪوڊ استعمال ڪندي ڪنهن به اسڪل باڪس ڪورس ۾ داخلا.

اوزار ۽ صلاحيتون

هن آرٽيڪل کي سمجهڻ لاءِ، توهان کي React Native سان ڪم ڪرڻ ۾ بنيادي صلاحيتن جي ضرورت آهي. ڪم ڪندڙ مشين جي سيٽنگن سان پاڻ کي واقف ڪرڻ لاء، توھان ڪري سگھو ٿا سرڪاري هدايتون استعمال ڪريو.

اسان کي سافٽ ويئر اوزار جي انهن نسخن جي ضرورت پوندي:

• نوڊ v10.15.0
• اين پي ايم 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 انسٽال ڪرڻ آهي:
$ yarn react-native-localize شامل ڪريو

جيڪڏهن انسٽاليشن جي عمل دوران مسئلا پيدا ٿئي ٿي، اهو انسٽاليشن مينوئل پڙهڻ جي قابل آهي.

react-native-localize لائبريري ڊولپر کي گھڻ لساني خاصيتن تائين رسائي ڏئي ٿي. پر هن کي هڪ وڌيڪ لائبريري جي ضرورت آهي - i18n.

هي آرٽيڪل استعمال جي وضاحت ڪري ٿو I18n.js JavaScript ۾ ترجمو مهيا ڪرڻ لاء.

$ يارن شامل ڪريو i18n-js

خير، جيئن ته i18n-js ڪيشنگ يا ميموائيزيشن مهيا نٿو ڪري، آئون هن لاء lodash.memoize استعمال ڪرڻ جي صلاح ڏيان ٿو:

$ yarn شامل ڪريو 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() translate() استعمال ڪندي هيلو موٽائي ٿو ۽ ان ۾ هڪ اهم پيٽرول شامل ڪري ٿو. انهن قدمن کان پوء، ايپليڪيشن "سمجھڻ" جي قابل ٿي ويندي ڪهڙي ٻولي جي ضرورت آهي ۽ ان ۾ پيغام ڏيکاريندي.

ايپليڪيشن لانچ

ھاڻي اھو وقت آھي جانچڻ جو ترجمو ڪيئن ڪم ڪري ٿو.

پهريون، اسان ٽائپ ڪندي ايپليڪيشن کي سموليٽر يا ايموليٽر ۾ لانچ ڪيو

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

اهو ڪجهه هن طرح نظر ايندو:

ھاڻي توھان ڪوشش ڪري سگھو ٿا ٻولي کي فرينچ ۾ تبديل ڪندي ايپليڪيشن لانچ ڪندي.

اسان عربي سان ساڳيو ڪم ڪندا آهيون، ڪو فرق ناهي.

هينئر تائين تمام سٺو.

پر ڇا ٿيندو جيڪڏهن توهان هڪ بي ترتيب ٻولي چونڊيو جنهن لاءِ ايپليڪيشن ۾ ڪوبه ترجمو ناهي؟

اهو ظاهر ٿئي ٿو ته FindBestLanguage جو ڪم سڀني دستيابن مان بهترين ترجمو مهيا ڪرڻ آهي. نتيجي طور، ڊفالٽ ٻولي ڏيکاري ويندي.

اسان فون سيٽنگون بابت ڳالهائي رهيا آهيون. مثال طور، iOS ايموليٽر ۾ توهان ٻولين جي ترتيب ڏسي سگهو ٿا.

جيڪڏهن چونڊيل ٻولي ترجيحي ٻولي نه آهي، FindBestAvailableLanguage واپس اچي ٿي اڻ بيان ڪيل ته جيئن ڊفالٽ ٻولي ڏيکاري وڃي.

بونس

react-native-localize وٽ ھڪڙو API آھي جيڪو وڏي تعداد ۾ ٻوليءَ جي عنصرن تائين پھچائي ٿو. ڪم شروع ڪرڻ کان اڳ، اهو دستاويز جي جانچ ڪرڻ جي قابل آهي.

پهچڻ

ايپليڪيشن کي بنا ڪنهن پريشاني جي گهڻ لساني ڪري سگهجي ٿو. React-native-localize هڪ بهترين آپشن آهي جيڪو توهان کي پنهنجي ايپ جي يوزر بيس کي وڌائڻ جي اجازت ڏئي ٿو.

پروجيڪٽ جو ذريعو ڪوڊ هتي آهي.

Skillbox سفارش ڪري ٿو:

• ٻن سالن جو عملي ڪورس "مان هڪ پرو ويب ڊولپر آهيان".
• آن لائين ڪورس "سي # ڊولپر شروع کان".
• عملي سال ڪورس "PHP ڊولپر 0 کان PRO تائين".

جو ذريعو: www.habr.com