ፕሮሆስተር > ጦማር > የኢንተርኔት ዜና > በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

አዳዲስ አገሮችን እና ክልሎችን ለሚገነቡ ዓለም አቀፍ ኩባንያዎች የምርቶች አካባቢያዊነት በጣም አስፈላጊ ነው. በተመሳሳይ ሁኔታ ለሞባይል አፕሊኬሽኖች አካባቢያዊ ማድረግ ያስፈልጋል. አንድ ገንቢ አለምአቀፍ መስፋፋትን ከጀመረ ከሌላ ሀገር የመጡ ተጠቃሚዎች በአፍ መፍቻ ቋንቋቸው ከበይነገጽ ጋር እንዲሰሩ እድል መስጠት አስፈላጊ ነው። በዚህ ጽሑፍ ውስጥ ጥቅሉን በመጠቀም React Native መተግበሪያን እንፈጥራለን ምላሽ-ተወላጅ-አካባቢያዊ ማድረግ.

Skillbox ይመክራል፡ ትምህርታዊ የመስመር ላይ ኮርስ "ሙያ ጃቫ ገንቢ".
እኛ እናስታውስዎታለን- ለሁሉም የ "ሀብር" አንባቢዎች - የ "Habr" የማስተዋወቂያ ኮድን በመጠቀም በማንኛውም የ Skillbox ኮርስ ውስጥ ሲመዘገቡ የ 10 ሩብልስ ቅናሽ.

መሳሪያዎች እና ችሎታዎች

ይህን ጽሑፍ ለመረዳት መሰረታዊ React Native ክህሎቶችን ይጠይቃል። ከሚሠራው ማሽን ቅንጅቶች ጋር ለመተዋወቅ, ይችላሉ ኦፊሴላዊ መመሪያዎችን ተጠቀም.

እነዚህ የሶፍትዌር መሳሪያዎች ስሪቶች ያስፈልጉናል፡-

  • መስቀለኛ መንገድ v10.15.0
  • npm 6.4.1
  • ክር 1.16.0
  • ምላሽ-ተወላጅ 0.59.9
  • ምላሽ-ተወላጅ-አካባቢያዊ ማድረግ 1.1.3
  • i18n-js 3.3.0

በመጀመር ላይ

እንግሊዝኛ፣ ፈረንሳይኛ እና አረብኛ የሚደግፍ መተግበሪያ እንፈጥራለን። መጀመሪያ react-native-cliን በመጠቀም አዲስ ፕሮጀክት እንፈጥራለን። ይህንን ለማድረግ በተርሚናል ውስጥ ይህንን መተየብ ያስፈልግዎታል

$ ምላሽ-ቤተኛ init ባለብዙ ቋንቋ
$ ሲዲ ባለብዙ ቋንቋ

የሚፈለጉትን ቤተ-መጻሕፍት መጨመር

የመጀመሪያው እርምጃ የሚከተለውን በመተየብ react-native-localizeን መጫን ነው።
$ ክር አጸፋዊ-ተወላጅ-አካባቢያዊ ማድረግ

በመጫን ሂደት ውስጥ ችግሮች ካጋጠሙዎት, የመጫኛ መመሪያውን ይመልከቱ.

ምላሽ-ቤተኛ-አካባቢያዊ ቤተ-መጽሐፍት ለገንቢው የብዙ ቋንቋ ባህሪያትን መዳረሻ ይሰጣል። ግን ሌላ ቤተ-መጽሐፍት ያስፈልጋታል - i18n.

ጽሑፉ አጠቃቀሙን ይገልጻል I18n.js በጃቫ ስክሪፕት ትርጉም ለመስጠት።

$ yarn አክል 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() የመጀመሪያውን ውቅር ያዘጋጃል።

ከዚያ የክስተት አድማጭን ወደ አካላት ዲዲ ተራራ () ማከል አለብን ፣ ይህ ንጥረ ነገር ዝመናዎችን ያዳምጣል እና ሲከሰት ወደ ‹LocalizationChange()› ይደውላል።

የhandLocalizationChange() ዘዴ setI18nConfig() እና forceUpdate()ን ይጠራል። ለውጦቹ እንዲታዩ ክፍሉ መቅረብ ስላለበት ይህ ለአንድሮይድ መሳሪያዎች አስፈላጊ ነው።

ከዚያ አድማጩን ከክፍለ ዊል ዩንውንት () ዘዴ ማስወገድ አለብን።

በመጨረሻም፣ ሠላም ትርጉም ()ን በመጠቀም እና በእሱ ላይ ቁልፍ ግቤት በመጨመር በምስል () ይመለሳል። ከነዚህ እርምጃዎች በኋላ, አፕሊኬሽኑ የትኛው ቋንቋ እንደሚያስፈልግ "መረዳት" እና በውስጡም መልዕክቶችን ማሳየት ይችላል.

የትግበራ ጅምር

ትርጉሙ እንዴት እንደሚሰራ ለማረጋገጥ ጊዜው አሁን ነው።

በመጀመሪያ አፕሊኬሽኑን በሲሙሌተር ወይም ኢሙሌተር ውስጥ በመተየብ እናስኬዳለን።

$ ምላሽ-ተወላጅ run-ios
$ ምላሽ-ቤተኛ ሩጫ-android
እንደዚህ ያለ ነገር ይመስላል።

በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

አሁን መተግበሪያውን በማስጀመር ቋንቋውን ወደ ፈረንሳይኛ ለመቀየር መሞከር ይችላሉ።

በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

በአረብኛ ቋንቋም እንዲሁ እናደርጋለን, ምንም ልዩነት የለም.

እስካሁን ሁሉም ነገር በጥሩ ሁኔታ እየሄደ ነው።

ነገር ግን በመተግበሪያው ውስጥ ትርጉም የሌለው የዘፈቀደ ቋንቋ ከመረጡ ምን ይከሰታል?

የ FindBestLanguage ተግባር ከሁሉም ከሚገኙት መካከል ምርጡን ትርጉም ማቅረብ ነው። በዚህ ምክንያት በነባሪነት የተዘጋጀው ቋንቋ ይታያል።

ስለ ስልክ መቼቶች ነው። ስለዚህ, ለምሳሌ, በ iOS emulator ውስጥ, የቋንቋዎችን ቅደም ተከተል ማየት ይችላሉ.

በReact Native ላይ ባለብዙ ቋንቋ መተግበሪያ እንጽፋለን።

የተመረጠው ቋንቋ ተመራጭ ቋንቋ ካልሆነ፣ ነባሪው ቋንቋ እንዲታይ ፈልግBestAvailableLanguage ሳይገለጽ ይመልሳል።

ጉርሻ

react-native-localize ብዙ ቁጥር ያላቸውን የቋንቋ ክፍሎች መዳረሻ የሚሰጥ ኤፒአይ አለው። ሥራ ከመጀመሩ በፊት, ሰነዶቹን ማንበብ ተገቢ ነው.

ግኝቶች

አፕሊኬሽኑ ያለ ምንም ችግር ባለብዙ ቋንቋ ማድረግ ይቻላል። React-native-localize የመተግበሪያዎን የተጠቃሚዎች ብዛት ለማስፋት የሚያስችል ምርጥ አማራጭ ነው።

የፕሮጀክት ምንጭ ኮድ እዚህ ይገኛል.

Skillbox ይመክራል፡

ምንጭ: hab.com

አስተያየት ያክሉ