റിയാക്ട് നേറ്റീവിൽ ഒരു ബഹുഭാഷാ ആപ്ലിക്കേഷൻ എഴുതുന്നു

പുതിയ രാജ്യങ്ങളും പ്രദേശങ്ങളും പര്യവേക്ഷണം ചെയ്യുന്ന അന്താരാഷ്ട്ര കമ്പനികൾക്ക് ഉൽപ്പന്ന പ്രാദേശികവൽക്കരണം വളരെ പ്രധാനമാണ്. അതുപോലെ, മൊബൈൽ ആപ്ലിക്കേഷനുകൾക്കും പ്രാദേശികവൽക്കരണം ആവശ്യമാണ്. ഒരു ഡെവലപ്പർ അന്താരാഷ്ട്ര വിപുലീകരണം ആരംഭിക്കുകയാണെങ്കിൽ, മറ്റൊരു രാജ്യത്ത് നിന്നുള്ള ഉപയോക്താക്കൾക്ക് അവരുടെ മാതൃഭാഷയിൽ ഇന്റർഫേസ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാനുള്ള അവസരം നൽകേണ്ടത് പ്രധാനമാണ്. ഈ ലേഖനത്തിൽ, പാക്കേജ് ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു റിയാക്റ്റ് നേറ്റീവ് ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കും പ്രതികരിക്കുക-നേറ്റീവ്-പ്രാദേശികമാക്കുക.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു: വിദ്യാഭ്യാസ ഓൺലൈൻ കോഴ്സ് "പ്രൊഫഷൻ ജാവ ഡെവലപ്പർ".
ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു: "Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 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 ബഹുഭാഷ
$ cd ബഹുഭാഷ

ആവശ്യമായ ലൈബ്രറികൾ കൂട്ടിച്ചേർക്കുന്നു

ഇനിപ്പറയുന്നവ ടൈപ്പ് ചെയ്തുകൊണ്ട് 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(), പ്രാരംഭ കോൺഫിഗറേഷൻ സജ്ജമാക്കുന്നു.

അപ്പോൾ നിങ്ങൾ ഘടകംDidMount() എന്നതിലേക്ക് ഒരു ഇവന്റ് ലിസണർ ചേർക്കേണ്ടതുണ്ട്, ഈ ഘടകം അപ്‌ഡേറ്റുകൾക്കായി ശ്രദ്ധിക്കുകയും അവ സംഭവിക്കുമ്പോൾ ഹാൻഡിൽLocalizationChange() എന്ന് വിളിക്കുകയും ചെയ്യും.

ഹാൻഡിൽLocalizationChange() രീതി setI18nConfig(), forceUpdate() എന്നിവ സജീവമാക്കുന്നു. മാറ്റങ്ങൾ ശ്രദ്ധേയമാകുന്നതിന് ഘടകം റെൻഡർ ചെയ്യേണ്ടതിനാൽ Android ഉപകരണങ്ങൾക്ക് ഇത് ആവശ്യമാണ്.

അപ്പോൾ നിങ്ങൾ ഘടകംWillUnmount() രീതിയിൽ നിന്ന് ലിസണിംഗ് നീക്കം ചെയ്യേണ്ടതുണ്ട്.

അവസാനമായി, translate() ഉപയോഗിച്ചും അതിലേക്ക് ഒരു കീ പാരാമീറ്റർ ചേർത്തും render() hello നൽകുന്നു. ഈ ഘട്ടങ്ങൾക്ക് ശേഷം, ഏത് ഭാഷയാണ് ആവശ്യമെന്ന് "മനസ്സിലാക്കാനും" അതിൽ സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കാനും അപ്ലിക്കേഷന് കഴിയും.

ആപ്ലിക്കേഷൻ ലോഞ്ച്

വിവർത്തനം എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് പരിശോധിക്കാനുള്ള സമയമാണിത്.

ആദ്യം, ടൈപ്പ് ചെയ്തുകൊണ്ട് ഞങ്ങൾ സിമുലേറ്ററിലോ എമുലേറ്ററിലോ ആപ്ലിക്കേഷൻ സമാരംഭിക്കുന്നു

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

ഇത് ഇതുപോലെ കാണപ്പെടും:

ഇപ്പോൾ ആപ്ലിക്കേഷൻ സമാരംഭിച്ചുകൊണ്ട് ഭാഷ ഫ്രഞ്ചിലേക്ക് മാറ്റാൻ ശ്രമിക്കാം.

ഞങ്ങൾ അറബിയിലും ഒരേ കാര്യം ചെയ്യുന്നു, വ്യത്യാസമില്ല.

ഇതുവരെ വളരെ നല്ലതായിരുന്നു.

എന്നാൽ ആപ്ലിക്കേഷനിൽ വിവർത്തനം ഇല്ലാത്ത ഒരു റാൻഡം ഭാഷ നിങ്ങൾ തിരഞ്ഞെടുത്താൽ എന്ത് സംഭവിക്കും?

ലഭ്യമായ എല്ലാ ഭാഷകളിൽ നിന്നും ഒപ്റ്റിമൽ വിവർത്തനം നൽകുക എന്നതാണ് findBestLanguage-ന്റെ ചുമതലയെന്ന് ഇത് മാറുന്നു. തൽഫലമായി, സ്ഥിരസ്ഥിതി ഭാഷ പ്രദർശിപ്പിക്കും.

ഞങ്ങൾ ഫോൺ ക്രമീകരണങ്ങളെക്കുറിച്ചാണ് സംസാരിക്കുന്നത്. ഉദാഹരണത്തിന്, iOS എമുലേറ്ററിൽ നിങ്ങൾക്ക് ഭാഷകളുടെ ക്രമം കാണാൻ കഴിയും.

തിരഞ്ഞെടുത്ത ഭാഷ തിരഞ്ഞെടുത്ത ഭാഷയല്ലെങ്കിൽ, findBestAvailableLanguage നിർവചിക്കാതെ തിരികെ നൽകുന്നു, അങ്ങനെ സ്ഥിരസ്ഥിതി ഭാഷ കാണിക്കും.

ബോണസ്

react-native-localize-ന് ധാരാളം ഭാഷാ ഘടകങ്ങളിലേക്ക് പ്രവേശനം നൽകുന്ന ഒരു API ഉണ്ട്. നിങ്ങൾ ജോലി ആരംഭിക്കുന്നതിന് മുമ്പ്, ഡോക്യുമെന്റേഷൻ പരിശോധിക്കുന്നത് മൂല്യവത്താണ്.

കണ്ടെത്തലുകൾ

ഒരു പ്രശ്നവുമില്ലാതെ ആപ്ലിക്കേഷൻ ബഹുഭാഷാ ആക്കാവുന്നതാണ്. നിങ്ങളുടെ ആപ്പിന്റെ ഉപയോക്തൃ അടിത്തറ വികസിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന മികച്ച ഓപ്ഷനാണ് React-native-localize.

പ്രോജക്റ്റ് സോഴ്സ് കോഡ് ഇവിടെയുണ്ട്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു:

• രണ്ടുവർഷത്തെ പ്രാക്ടിക്കൽ കോഴ്സ് "ഞാൻ ഒരു PRO വെബ് ഡെവലപ്പർ ആണ്".
• ഓൺലൈൻ കോഴ്സ് "ആദ്യം മുതൽ C# ഡവലപ്പർ".
• പ്രായോഗിക വർഷ കോഴ്സ് "0 മുതൽ PRO വരെയുള്ള PHP ഡവലപ്പർ".

അവലംബം: www.habr.com