🥇 Táimid ag scríobh feidhmchlár ilteangach in React Native

Tá logánú táirgí an-tábhachtach do chuideachtaí idirnáisiúnta a dhéanann iniúchadh ar thíortha agus ar réigiúin nua. Mar an gcéanna, tá gá le logánú le haghaidh feidhmchláir mhóibíleacha. Má chuireann forbróir tús le leathnú idirnáisiúnta, tá sé tábhachtach deis a thabhairt d’úsáideoirí ó thír eile oibriú leis an gcomhéadan ina dteanga dhúchais. San Airteagal seo, cruthóimid feidhmchlár React Native ag baint úsáide as an bpacáiste imoibríonn-dúchais-localize.

Molann Skillbox: Cúrsa oideachais ar líne "Forbróir Java Gairm".
Meabhraímid: do léitheoirí uile "Habr" - lascaine de 10 rúbal nuair a chláraíonn siad in aon chúrsa Scilbox ag baint úsáide as an gcód bolscaireachta "Habr".

Uirlisí agus scileanna

Chun an t-alt seo a thuiscint, beidh bunscileanna uait maidir le bheith ag obair le React Native. Chun eolas a chur ar shocruithe an mheaisín oibre, is féidir leat bain úsáid as na treoracha oifigiúla.

Beidh na leaganacha seo d'uirlisí bogearraí de dhíth orainn:

Nód v10.15.0
nim 6.4.1
snáth 1.16.0
imoibríoch 0.59.9
imoibríoch-dúchais-locánú 1.1.3
i18n- js 3.3.0

Ag tosú

Cruthóimid feidhmchlár a thacóidh le Béarla, Fraincis agus Araibis. Ar dtús cruthaímid tionscadal nua ag baint úsáide as react-native-cli. Chun seo a dhéanamh, ní mór duit é seo a chlóscríobh sa teirminéal:

$ react-dúchais init iltheanga
$cd iltheanga

Ag cur na leabharlanna riachtanacha leis

Is é an chéad chéim ná react-native-localize a shuiteáil tríd an méid seo a leanas a chlóscríobh:
$ snáth cuir react-dúchais-localize

Má tharlaíonn fadhbanna le linn an phróisis suiteála, Is fiú an lámhleabhar suiteála a léamh.

Tugann an leabharlann react-dúchais-localize rochtain don fhorbróir ar ghnéithe ilteangacha. Ach tá leabharlann amháin eile ag teastáil uaithi - i18n.

Déanann an t-alt seo cur síos ar an úsáid I18n.js chun aistriúchán go JavaScript a chur ar fáil.

$ snáth cuir i18n-js

Bhuel, ós rud é nach soláthraíonn i18n-js taisce nó meamramú, molaim lodash.memoize a úsáid le haghaidh seo:

$ snáth cuir lodash.memoize

Ag obair le haistriúcháin

Ionas go mbeidh an feidhmchlár in ann oibriú le teangacha eile, ní mór duit eolaire aistriúcháin a chruthú laistigh de src ar dtús, ansin trí chomhad JSON do gach teanga.

1. en.json don Bhéarla;

2. fr.json don Fhraincis;

3. ar.json don Araibis.

Tá oibiachtaí JSON le heochracha agus luachanna sna comhaid seo. Beidh an eochair mar an gcéanna do gach teanga. Úsáideann an feidhmchlár é chun faisnéis téacs a thaispeáint.

Is é luach an téacs nach mór a thaispeáint don úsáideoir.

Béarla:

{"hello": "Dia duit a Dhomhan!"}

Французский

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

Araibis

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

Is féidir leat teangacha eile a chur leis ar an mbealach céanna.

Príomhchód

Ag an bpointe seo, ní mór duit an comhad App.js a oscailt agus allmhairí a chur leis:

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

Tar éis seo, cuirtear feidhmeanna cúnta agus tairisigh leis a bheidh úsáideach níos déanaí.

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

Bhuel, déanaimis comhpháirt den rang App a chruthú anois:

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

Socraíonn an chéad eilimint, setI18nConfig(), an chumraíocht tosaigh.

Ansin ní mór duit éisteoir imeachta a chur le componentDidMount(), éistfidh an eilimint seo le haghaidh nuashonruithe agus glaofaidh sé ar handleLocalizationChange() nuair a tharlóidh siad.

Gníomhachtaíonn an modh handleLocalizationChange() setI18nConfig() agus forceUpdate(). Tá sé seo riachtanach le haghaidh feistí Android mar ní mór an chomhpháirt a sholáthar chun na hathruithe a bheith faoi deara.

Ansin ní mór duit an éisteacht a bhaint as an modh componentWillUnmount().

Ar deireadh, filleann rindreáil() hello trí úsáid a bhaint as translate() agus ag cur paraiméadar eochrach leis. Tar éis na céimeanna seo, beidh an t-iarratas in ann "a thuiscint" cén teanga atá ag teastáil agus teachtaireachtaí a thaispeáint ann.

Seoladh iarratais

Anois tá an t-am le seiceáil conas a oibríonn an t-aistriúchán.

Ar dtús, cuirimid an feidhmchlár san insamhlóir nó san aithriseoir trí chlóscríobh

$ rith-ios imoibríocha
$ imoibríoch-dhúchasach rith-Android

Beidh sé cuma rud éigin mar seo:

Anois is féidir leat triail a bhaint as an teanga a athrú go Fraincis ach an feidhmchlár a sheoladh.

Déanaimid an rud céanna leis an Araibis, níl aon difríocht.

Go dtí seo chomh maith.

Ach cad a tharlóidh má roghnaíonn tú teanga randamach nach bhfuil aon aistriúchán san fheidhmchlár ina leith?

Tharlaíonn sé gurb é tasc findBestLanguage ná an t-aistriúchán is fearr a sholáthar ó na cinn atá ar fáil. Mar thoradh air sin, taispeánfar an teanga réamhshocraithe.

Táimid ag caint faoi shocruithe gutháin. Mar shampla, san aithriseoir iOS is féidir leat ord na dteangacha a fheiceáil.

Murab í an teanga roghnaithe an rogha teanga, filleann findBestAvailableLanguage neamhshainithe ionas go dtaispeántar an teanga réamhshocraithe.

bónas

tá API ag react-native-localize a sholáthraíonn rochtain ar líon mór eilimintí teanga. Sula dtosaíonn tú ag obair, Is fiú na doiciméid a sheiceáil.

Torthaí

Is féidir an t-iarratas a dhéanamh ilteangach gan aon fhadhbanna. Is rogha iontach é React-native-localize a ligeann duit bonn úsáideora d’aip a leathnú.

Cód foinse tionscadail atá anseo.

Molann Skillbox:

Cúrsa praiticiúil dhá bhliain "Is forbróir gréasáin OCP mé".

Cúrsa ar líne "C# forbróir ón tús".

Cúrsa bliana praiticiúla "Forbróir PHP ó 0 go PRO".

Foinse: will.com

Scríobhaimid feidhmchlár ilteangach ar React Native