🥇Tunaandika programu ya lugha nyingi katika React Native

Ujanibishaji wa bidhaa ni muhimu sana kwa makampuni ya kimataifa yanayochunguza nchi na maeneo mapya. Vile vile, ujanibishaji unahitajika kwa programu za simu. Ikiwa msanidi ataanza upanuzi wa kimataifa, ni muhimu kuwapa watumiaji kutoka nchi nyingine fursa ya kufanya kazi na kiolesura katika lugha yao ya asili. Katika nakala hii, tutaunda programu ya React Native kwa kutumia kifurushi tenda-asilia-janibishe.

Skillbox inapendekeza: Kozi ya elimu mtandaoni "Msanidi programu wa Java".
Tunakukumbusha: kwa wasomaji wote wa "Habr" - punguzo la rubles 10 wakati wa kujiandikisha katika kozi yoyote ya Skillbox kwa kutumia msimbo wa uendelezaji wa "Habr".

Zana na ujuzi

Ili kuelewa makala haya, unahitaji ujuzi wa kimsingi katika kufanya kazi na React Native. Ili kujitambulisha na mipangilio ya mashine ya kufanya kazi, unaweza tumia maagizo rasmi.

Tutahitaji matoleo haya ya zana za programu:

Njia v10.15.0
npm 6.4.1
uzi 1.16.0
-asili 0.59.9
itikia-asilia-janibishe 1.1.3
i18n-js 3.3.0

Kuanza

Tutaunda programu ambayo itasaidia Kiingereza, Kifaransa na Kiarabu. Kwanza tunaunda mradi mpya kwa kutumia react-native-cli. Ili kufanya hivyo, unahitaji kuandika hii kwenye terminal:

$ react-native init multiLanguage
$ cd Lugha nyingi

Kuongeza maktaba muhimu

Hatua ya kwanza ni kusakinisha react-native-localize kwa kuandika yafuatayo:
$ uzi ongeza react-native-localise

Ikiwa matatizo hutokea wakati wa mchakato wa ufungaji, Inastahili kusoma mwongozo wa ufungaji.

Maktaba ya react-native-localize inampa msanidi ufikiaji wa vipengele vya lugha nyingi. Lakini anahitaji maktaba moja zaidi - i18n.

Nakala hii inaelezea matumizi I18n.js ili kutoa tafsiri katika JavaScript.

$ uzi ongeza i18n-js

Kweli, kwa kuwa i18n-js haitoi kache au kukariri, ninapendekeza kutumia lodash.memoize kwa hili:

$ uzi ongeza lodash.memoize

Kufanya kazi na tafsiri

Ili programu iweze kufanya kazi na lugha zingine, kwanza unahitaji kuunda saraka ya tafsiri ndani ya src, kisha faili tatu za JSON kwa kila lugha.

1. en.json kwa Kiingereza;

2. fr.json kwa Kifaransa;

3. ar.json kwa Kiarabu.

Faili hizi zina vipengee vya JSON vilivyo na funguo na thamani. Ufunguo utakuwa sawa kwa kila lugha. Inatumiwa na programu kuonyesha habari ya maandishi.

Thamani ni maandishi ambayo yanahitaji kuonyeshwa kwa mtumiaji.

Kiingereza:

{"hello": "Hujambo Ulimwengu!"}

Французский

{"hello": "Salut le Monde!"}

Арабский

{ "hello": "أهلاً بالعالم"}

Unaweza kuongeza lugha zingine kwa njia sawa.

Kanuni kuu

Katika hatua hii, unahitaji kufungua faili ya App.js na kuongeza uagizaji kwake:

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";

Baada ya hayo, kazi za msaidizi na mara kwa mara zinaongezwa ambazo zitakuwa na manufaa baadaye.

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;
};

Kweli, sasa wacha tuunde sehemu ya darasa la Programu:

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
  }
});

Kipengele cha kwanza, setI18nConfig(), huweka usanidi wa awali.

Kisha unahitaji kuongeza msikilizaji wa tukio kwa componentDidMount(), kipengele hiki kitasikiliza masasisho na kupiga simu handleLocalizationChange() yanapotokea.

Njia ya kushughulikiaLocalizationChange() huwasha setI18nConfig() na forceUpdate(). Hii ni muhimu kwa vifaa vya Android kwani ni lazima kijenzi kitolewe ili mabadiliko yaonekane.

Kisha unahitaji kuondoa usikilizaji kutoka kwa componentWillUnmount() njia.

Mwishowe, render() inarudisha hujambo kwa kutumia translate() na kuongeza kigezo muhimu kwake. Baada ya hatua hizi, programu itaweza "kuelewa" lugha gani inahitajika na kuonyesha ujumbe ndani yake.

Uzinduzi wa programu

Sasa ni wakati wa kuangalia jinsi tafsiri inavyofanya kazi.

Kwanza, tunazindua programu katika simulator au emulator kwa kuandika

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

Itaonekana kitu kama hiki:

Sasa unaweza kujaribu kubadilisha lugha kuwa Kifaransa kwa kuzindua programu.

Tunafanya vivyo hivyo na Kiarabu, hakuna tofauti.

Hadi sasa nzuri sana.

Lakini nini kitatokea ukichagua lugha nasibu ambayo hakuna tafsiri katika programu?

Inabadilika kuwa kazi ya findBestLanguage ni kutoa tafsiri bora kutoka kwa zote zinazopatikana. Matokeo yake, lugha chaguo-msingi itaonyeshwa.

Tunazungumza juu ya mipangilio ya simu. Kwa mfano, katika emulator ya iOS unaweza kuona mpangilio wa lugha.

Ikiwa lugha iliyochaguliwa sio lugha inayopendelewa, findBestAvailableLanguage inarudisha bila kufafanuliwa ili lugha chaguo-msingi ionyeshwe.

Bonasi

react-native-localize ina API ambayo hutoa ufikiaji wa idadi kubwa ya vipengele vya lugha. Kabla ya kuanza kazi, Inastahili kuangalia nyaraka.

Matokeo

Programu inaweza kufanywa kwa lugha nyingi bila matatizo yoyote. React-native-localize ni chaguo bora ambalo hukuruhusu kupanua wigo wa watumiaji wa programu yako.

Msimbo wa chanzo cha mradi iko hapa.

Skillbox inapendekeza:

Kozi ya vitendo ya miaka miwili "Mimi ni msanidi programu wa wavuti".

Kozi ya mkondoni "Msanidi wa C # kutoka mwanzo".

Kozi ya mwaka wa vitendo "Msanidi programu wa PHP kutoka 0 hadi PRO".

Chanzo: mapenzi.com

Kuandika programu ya lugha nyingi katika React Native