React Native میں کثیر لسانی درخواست لکھنا

نئے ممالک اور خطوں کی تلاش کرنے والی بین الاقوامی کمپنیوں کے لیے پروڈکٹ لوکلائزیشن بہت اہم ہے۔ اسی طرح، موبائل ایپلیکیشنز کے لیے لوکلائزیشن کی ضرورت ہے۔ اگر کوئی ڈویلپر بین الاقوامی توسیع شروع کرتا ہے، تو یہ ضروری ہے کہ دوسرے ملک کے صارفین کو ان کی مادری زبان میں انٹرفیس کے ساتھ کام کرنے کا موقع فراہم کیا جائے۔ اس آرٹیکل میں، ہم پیکیج کا استعمال کرتے ہوئے ایک React Native ایپلی کیشن بنائیں گے۔ رد عمل-مقامی.

Skillbox تجویز کرتا ہے: تعلیمی آن لائن کورس "پیشہ جاوا ڈویلپر".
ہم آپ کو یاد دلاتے ہیں: "Habr" کے تمام قارئین کے لیے - "Habr" پروموشنل کوڈ کا استعمال کرتے ہوئے کسی بھی Skillbox کورس میں داخلہ لینے پر 10 rubles کی رعایت۔

اوزار اور ہنر

اس مضمون کو سمجھنے کے لیے، آپ کو React Native کے ساتھ کام کرنے میں بنیادی مہارتوں کی ضرورت ہے۔ کام کرنے والی مشین کی ترتیبات سے اپنے آپ کو واقف کرنے کے لیے، آپ کر سکتے ہیں۔ سرکاری ہدایات کا استعمال کریں.

ہمیں سافٹ ویئر ٹولز کے ان ورژنز کی ضرورت ہوگی:

• نوڈ 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 کو انسٹال کرنا ہے۔
$ yarn react-native-localize شامل کریں۔

اگر تنصیب کے عمل کے دوران مسائل پیدا ہوتے ہیں، یہ انسٹالیشن دستی پڑھنے کے قابل ہے۔.

react-native-localize لائبریری ڈویلپر کو کثیر لسانی خصوصیات تک رسائی فراہم کرتی ہے۔ لیکن اسے ایک اور لائبریری کی ضرورت ہے - i18n۔

یہ مضمون استعمال کی وضاحت کرتا ہے۔ I18n.js جاوا اسکرپٹ میں ترجمہ فراہم کرنے کے لیے۔

$ یارن i18n-js شامل کریں۔

ٹھیک ہے، چونکہ i18n-js کیشنگ یا میموائزیشن فراہم نہیں کرتا ہے، میں اس کے لیے lodash.memoize استعمال کرنے کی تجویز کرتا ہوں:

$ یارن 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() طریقہ setI18nConfig() اور forceUpdate() کو چالو کرتا ہے۔ یہ اینڈرائیڈ ڈیوائسز کے لیے ضروری ہے کیونکہ تبدیلیوں کو نمایاں کرنے کے لیے جزو کو رینڈر کیا جانا چاہیے۔

پھر آپ کو componentWillUnmount() طریقہ سے سننے کو ہٹانے کی ضرورت ہے۔

آخر میں، render() translate() کا استعمال کرکے اور اس میں کلیدی پیرامیٹر شامل کرکے ہیلو لوٹاتا ہے۔ ان اقدامات کے بعد، ایپلی کیشن "سمجھ" سکے گی کہ کس زبان کی ضرورت ہے اور اس میں پیغامات ڈسپلے کر سکیں گے۔

ایپلیکیشن لانچ۔

اب یہ چیک کرنے کا وقت ہے کہ ترجمہ کیسے کام کرتا ہے۔

سب سے پہلے، ہم ٹائپ کر کے سمیلیٹر یا ایمولیٹر میں ایپلیکیشن لانچ کرتے ہیں۔

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

یہ کچھ اس طرح نظر آئے گا:

اب آپ ایپلیکیشن لانچ کرکے زبان کو فرانسیسی میں تبدیل کرنے کی کوشش کر سکتے ہیں۔

ہم عربی کے ساتھ بھی یہی کرتے ہیں، کوئی فرق نہیں ہے۔

اب تک بہت اچھا۔

لیکن کیا ہوتا ہے اگر آپ بے ترتیب زبان کا انتخاب کرتے ہیں جس کا اطلاق میں کوئی ترجمہ نہیں ہے؟

یہ پتہ چلتا ہے کہ findBestLanguage کا کام تمام دستیاب زبانوں سے بہترین ترجمہ فراہم کرنا ہے۔ نتیجے کے طور پر، پہلے سے طے شدہ زبان ظاہر ہوگی۔

ہم فون کی ترتیبات کے بارے میں بات کر رہے ہیں۔ مثال کے طور پر، iOS ایمولیٹر میں آپ زبانوں کی ترتیب دیکھ سکتے ہیں۔

اگر منتخب کردہ زبان ترجیحی زبان نہیں ہے، تو FindBestAvailableLanguage غیر وضاحتی واپس آتی ہے تاکہ پہلے سے طے شدہ زبان دکھائی جائے۔

بونس

react-native-localize کے پاس ایک API ہے جو زبان کے عناصر کی ایک بڑی تعداد تک رسائی فراہم کرتا ہے۔ کام شروع کرنے سے پہلے، یہ دستاویزات کی جانچ پڑتال کے قابل ہے.

نتائج

ایپلی کیشن کو بغیر کسی پریشانی کے کثیر لسانی بنایا جا سکتا ہے۔ React-native-localize ایک بہترین آپشن ہے جو آپ کو اپنی ایپ کے صارف کی بنیاد کو بڑھانے کی اجازت دیتا ہے۔

پروجیکٹ سورس کوڈ یہاں ہے.

Skillbox تجویز کرتا ہے:

• دو سالہ پریکٹیکل کورس "میں ایک PRO ویب ڈویلپر ہوں".
• آن لائن کورس۔ "شروع سے C# ڈویلپر".
• عملی سال کا کورس "0 سے پی آر او تک پی ایچ پی ڈویلپر".

ماخذ: www.habr.com