રીએક્ટ નેટીવમાં બહુભાષી એપ્લિકેશન લખવી

નવા દેશો અને પ્રદેશોની શોધખોળ કરતી આંતરરાષ્ટ્રીય કંપનીઓ માટે ઉત્પાદન સ્થાનિકીકરણ ખૂબ જ મહત્વપૂર્ણ છે. તેવી જ રીતે, મોબાઇલ એપ્લિકેશન માટે સ્થાનિકીકરણ જરૂરી છે. જો વિકાસકર્તા આંતરરાષ્ટ્રીય વિસ્તરણ શરૂ કરે છે, તો બીજા દેશના વપરાશકર્તાઓને તેમની મૂળ ભાષામાં ઇન્ટરફેસ સાથે કામ કરવાની તક આપવી મહત્વપૂર્ણ છે. આ લેખમાં, અમે પેકેજનો ઉપયોગ કરીને રીએક્ટ નેટિવ એપ્લિકેશન બનાવીશું પ્રતિક્રિયા-મૂળ-સ્થાનિકીકરણ.

સ્કિલબોક્સ ભલામણ કરે છે: શૈક્ષણિક ઓનલાઈન કોર્સ "પ્રોફેશન જાવા ડેવલપર".
અમે યાદ કરાવીએ છીએ: 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 નો ઉપયોગ કરીને નવો પ્રોજેક્ટ બનાવીએ છીએ. આ કરવા માટે, તમારે ટર્મિનલમાં આ લખવાની જરૂર છે:

$ પ્રતિક્રિયા-મૂળ શરૂઆત બહુભાષી
$ cd બહુભાષી

જરૂરી પુસ્તકાલયો ઉમેરી રહ્યા છીએ

પ્રથમ પગલું એ નીચે લખીને 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() ને સક્રિય કરે છે. Android ઉપકરણો માટે આ જરૂરી છે કારણ કે ફેરફારો ધ્યાનપાત્ર બને તે માટે ઘટક રેન્ડર થયેલ હોવું આવશ્યક છે.

પછી તમારે componentWillUnmount() પદ્ધતિમાંથી શ્રવણને દૂર કરવાની જરૂર છે.

છેલ્લે, render() translate() નો ઉપયોગ કરીને અને તેમાં કી પેરામીટર ઉમેરીને હેલો પરત કરે છે. આ પગલાંઓ પછી, એપ્લિકેશન કઈ ભાષાની જરૂર છે તે "સમજવા" અને તેમાં સંદેશા પ્રદર્શિત કરવામાં સમર્થ હશે.

એપ્લિકેશન લોન્ચ

અનુવાદ કેવી રીતે કાર્ય કરે છે તે તપાસવાનો હવે સમય છે.

પ્રથમ, અમે ટાઇપ કરીને સિમ્યુલેટર અથવા ઇમ્યુલેટરમાં એપ્લિકેશન લોંચ કરીએ છીએ

$ પ્રતિક્રિયા-નેટિવ રન-આઇઓએસ
$ પ્રતિક્રિયા-નેટિવ રન-એન્ડ્રોઇડ

તે આના જેવું કંઈક દેખાશે:

હવે તમે એપ્લિકેશન લોંચ કરીને ભાષાને ફ્રેન્ચમાં બદલવાનો પ્રયાસ કરી શકો છો.

અમે અરબી સાથે સમાન વસ્તુ કરીએ છીએ, તેમાં કોઈ તફાવત નથી.

અત્યાર સુધી ખૂબ સારું.

પરંતુ જો તમે એવી રેન્ડમ ભાષા પસંદ કરો કે જેના માટે એપ્લિકેશનમાં કોઈ અનુવાદ નથી, તો શું થશે?

તે તારણ આપે છે કે findBestLanguage નું કાર્ય તમામ ઉપલબ્ધ ભાષામાંથી શ્રેષ્ઠ અનુવાદ પ્રદાન કરવાનું છે. પરિણામે, ડિફૉલ્ટ ભાષા પ્રદર્શિત થશે.

અમે ફોન સેટિંગ્સ વિશે વાત કરી રહ્યા છીએ. ઉદાહરણ તરીકે, iOS ઇમ્યુલેટરમાં તમે ભાષાઓનો ક્રમ જોઈ શકો છો.

જો પસંદ કરેલી ભાષા પસંદગીની ભાષા નથી, તો FindBestAvailableLanguage અવ્યાખ્યાયિત પરત કરે છે જેથી ડિફોલ્ટ ભાષા બતાવવામાં આવે.

બોનસ

react-native-localize પાસે એક API છે જે મોટી સંખ્યામાં ભાષા ઘટકોની ઍક્સેસ પ્રદાન કરે છે. તમે કામ શરૂ કરો તે પહેલાં, દસ્તાવેજીકરણ તપાસવું યોગ્ય છે.

તારણો

એપ્લિકેશન કોઈપણ સમસ્યા વિના બહુભાષી બનાવી શકાય છે. React-native-localize એ એક શ્રેષ્ઠ વિકલ્પ છે જે તમને તમારી એપ્લિકેશનના વપરાશકર્તા આધારને વિસ્તૃત કરવાની મંજૂરી આપે છે.

પ્રોજેક્ટ સ્રોત કોડ અહીં છે.

સ્કિલબોક્સ ભલામણ કરે છે:

• બે વર્ષનો પ્રેક્ટિકલ કોર્સ "હું પ્રો વેબ ડેવલપર છું".
• ઓનલાઇન કોર્સ "શરૂઆતથી C# વિકાસકર્તા".
• એક વર્ષનો પ્રેક્ટિકલ કોર્સ "0 થી PRO સુધી PHP વિકાસકર્તા".

સોર્સ: www.habr.com