আমরা React Native-এ একটি বহুভাষিক অ্যাপ্লিকেশন লিখি

নতুন দেশ এবং অঞ্চল বিকাশকারী আন্তর্জাতিক সংস্থাগুলির জন্য পণ্যগুলির স্থানীয়করণ অত্যন্ত গুরুত্বপূর্ণ। একইভাবে, মোবাইল অ্যাপ্লিকেশনের জন্য স্থানীয়করণ প্রয়োজন। যদি একজন বিকাশকারী আন্তর্জাতিক সম্প্রসারণ শুরু করে, তাহলে অন্য দেশের ব্যবহারকারীদের তাদের স্থানীয় ভাষায় ইন্টারফেসের সাথে কাজ করার সুযোগ দেওয়া গুরুত্বপূর্ণ। এই নিবন্ধে, আমরা প্যাকেজ ব্যবহার করে একটি প্রতিক্রিয়া নেটিভ অ্যাপ তৈরি করব প্রতিক্রিয়া-নেটিভ-স্থানীয়করণ.

Skillbox সুপারিশ করে: শিক্ষাগত অনলাইন কোর্স "পেশা জাভা বিকাশকারী".
আমরা মনে করিয়ে দিচ্ছি: "Habr"-এর সকল পাঠকদের জন্য - "Habr" প্রচারমূলক কোড ব্যবহার করে যেকোনো 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 বহুভাষা

প্রয়োজনীয় লাইব্রেরি যোগ করা হচ্ছে

প্রথম ধাপ হল নিম্নলিখিত টাইপ করে react-native-localize ইনস্টল করা:
$ yarn যোগ করুন react-native-localize

আপনি যদি ইনস্টলেশন প্রক্রিয়া চলাকালীন সমস্যার সম্মুখীন হন, ইনস্টলেশন ম্যানুয়াল পরীক্ষা করে দেখুন.

রিঅ্যাক্ট-নেটিভ-লোকালাইজ লাইব্রেরি ডেভেলপারকে বহুভাষিক বৈশিষ্ট্যে অ্যাক্সেস দেয়। কিন্তু তার আরেকটি লাইব্রেরি দরকার - i18n।

নিবন্ধটি ব্যবহার বর্ণনা করে I18n.js জাভাস্ক্রিপ্টে অনুবাদ প্রদান করার জন্য।

$ সুতা যোগ করুন 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() পদ্ধতি সেটI18nConfig() এবং forceUpdate() আহ্বান করে। এটি অ্যান্ড্রয়েড ডিভাইসগুলির জন্য প্রয়োজনীয়, কারণ পরিবর্তনগুলি দৃশ্যমান হওয়ার জন্য উপাদানটি অবশ্যই রেন্ডার করা উচিত৷

তারপর আমাদের কম্পোনেন্ট উইলআনমাউন্ট() পদ্ধতি থেকে শ্রোতাকে অপসারণ করতে হবে।

অবশেষে, translate() ব্যবহার করে এবং এতে একটি কী প্যারামিটার যোগ করে রেন্ডার() এ হ্যালো ফেরত দেওয়া হয়। এই পদক্ষেপগুলির পরে, অ্যাপ্লিকেশনটি কোন ভাষা প্রয়োজন তা "বুঝতে" এবং এতে বার্তাগুলি দেখাতে সক্ষম হবে৷

অ্যাপ্লিকেশন প্রবর্তন

এখন অনুবাদ কিভাবে কাজ করে তা পরীক্ষা করার সময়।

প্রথমে আমরা টাইপ করে সিমুলেটর বা এমুলেটরে অ্যাপ্লিকেশনটি চালাই

$ প্রতিক্রিয়া-নেটিভ রান-আইওএস
$ প্রতিক্রিয়া-নেটিভ রান-অ্যান্ড্রয়েড

এটি এই মত কিছু দেখাবে:

এখন আপনি অ্যাপ্লিকেশনটি চালু করে ভাষাটিকে ফ্রেঞ্চে পরিবর্তন করার চেষ্টা করতে পারেন।

আমরা আরবি ভাষার সাথে একই করি, কোন পার্থক্য নেই।

এখন পর্যন্ত সবকিছু ঠিকঠাক চলছে।

কিন্তু আপনি যদি এমন একটি র্যান্ডম ভাষা নির্বাচন করেন যার অ্যাপে অনুবাদ নেই তাহলে কী হবে?

দেখা যাচ্ছে যে FindBestLanguage-এর কাজ হল উপলব্ধ সকলের মধ্যে সর্বোত্তম সম্ভাব্য অনুবাদ প্রদান করা। ফলস্বরূপ, ডিফল্টরূপে সেট করা ভাষা প্রদর্শিত হবে।

এটি ফোন সেটিংস সম্পর্কে। সুতরাং, উদাহরণস্বরূপ, iOS এমুলেটরে, আপনি ভাষার ক্রম দেখতে পারেন।

যদি নির্বাচিত ভাষাটি পছন্দের ভাষা না হয়, তাহলে FindBestAvailableLanguage অনির্ধারিত রিটার্ন করে যাতে ডিফল্ট ভাষা দেখানো হয়।

অধিবৃত্তি

react-native-localize-এর একটি API রয়েছে যা প্রচুর সংখ্যক ভাষার উপাদানগুলিতে অ্যাক্সেস প্রদান করে। কাজ শুরু করার আগে, এটা ডকুমেন্টেশন পড়া মূল্য.

তথ্যও

অ্যাপ্লিকেশন কোনো সমস্যা ছাড়াই বহুভাষিক করা যেতে পারে. প্রতিক্রিয়া-নেটিভ-লোকালাইজ একটি দুর্দান্ত বিকল্প যা আপনাকে আপনার অ্যাপ্লিকেশনের ব্যবহারকারীদের পরিসর প্রসারিত করতে দেয়।

প্রোজেক্ট সোর্স কোড এখানে.

Skillbox সুপারিশ করে:

• দুই বছরের ব্যবহারিক কোর্স "আমি একজন প্রো ওয়েব ডেভেলপার".
• অনলাইন কোর্স "স্ক্র্যাচ থেকে C# বিকাশকারী".
• ব্যবহারিক বছরের কোর্স "0 থেকে PRO পর্যন্ত পিএইচপি বিকাশকারী".

উত্স: www.habr.com