🥇 Rydyn ni'n ysgrifennu cymhwysiad amlieithog ar React Native

Mae lleoleiddio cynhyrchion yn bwysig iawn i gwmnïau rhyngwladol sy'n datblygu gwledydd a rhanbarthau newydd. Yn yr un modd, mae angen lleoleiddio ar gyfer cymwysiadau symudol. Os yw datblygwr yn dechrau ehangu rhyngwladol, mae'n bwysig rhoi cyfle i ddefnyddwyr o wlad arall weithio gyda'r rhyngwyneb yn eu hiaith frodorol. Yn yr erthygl hon, byddwn yn creu app React Native gan ddefnyddio'r pecyn adweithio-brodorol-lleoli.

Mae Skillsbox yn argymell: Cwrs addysgol ar-lein "Datblygwr Java Proffesiynol".
Rydym yn atgoffa: i holl ddarllenwyr "Habr" - gostyngiad o 10 rubles wrth gofrestru ar unrhyw gwrs Skillbox gan ddefnyddio'r cod hyrwyddo "Habr".

Offer a sgiliau

Mae deall yr erthygl hon yn gofyn am sgiliau React Brodorol sylfaenol. I ddod yn gyfarwydd â gosodiadau'r peiriant gweithio, gallwch chi defnyddio cyfarwyddiadau swyddogol.

Mae angen y fersiynau hyn o offer meddalwedd arnom:

Nod v10.15.0
npm 6.4.1
edafedd 1.16.0
adweith-frodorol 0.59.9
adweithio-brodorol-leoli 1.1.3
i18n- js 3.3.0

Dechrau arni

Byddwn yn creu cymhwysiad a fydd yn cefnogi Saesneg, Ffrangeg ac Arabeg. Yn gyntaf rydym yn creu prosiect newydd gan ddefnyddio react-native-cli. I wneud hyn, yn y derfynell mae angen i chi deipio hwn:

$ adweith-frodorol init amlIaith
$cd amlieithog

Ychwanegu'r llyfrgelloedd gofynnol

Y cam cyntaf yw gosod react-native-localize trwy deipio'r canlynol:
$ edafedd ychwanegu react-native-localize

Os byddwch chi'n dod ar draws problemau yn ystod y broses osod, edrychwch ar y llawlyfr gosod.

Mae'r llyfrgell ymateb-frodorol-leoli yn rhoi mynediad i'r datblygwr i nodweddion amlieithog. Ond mae angen llyfrgell arall arni - i18n.

Mae'r erthygl yn disgrifio'r defnydd I18n.js er mwyn darparu cyfieithiad yn JavaScript.

$ edafedd ychwanegu i18n-js

Wel, gan nad yw i18n-js yn darparu caching neu memoization, rwy'n awgrymu defnyddio lodash.memoize ar gyfer hyn:

$ edafedd ychwanegu lodash.memoize

Gweithio gyda chyfieithiadau

Er mwyn i'r rhaglen weithio gydag ieithoedd eraill, yn gyntaf mae angen i chi greu cyfeiriadur cyfieithiadau y tu mewn i src, yna tair ffeil JSON ar gyfer pob un o'r ieithoedd.

1. en.json ar gyfer Saesneg;

2. fr.json ar gyfer Ffrangeg;

3. ar.json ar gyfer Arabeg.

Mae'r ffeiliau hyn yn cynnwys gwrthrychau JSON gydag allweddi a gwerthoedd. Yr un fydd yr allwedd ar gyfer pob iaith. Fe'i defnyddir gan y rhaglen i arddangos gwybodaeth destunol.

Gwerth (gwerth) yw'r testun y mae angen ei ddangos i'r defnyddiwr.

Saesneg:

{ "helo": "Helo Fyd!"}

Французский

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

Арабский

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

Gellir ychwanegu ieithoedd eraill yn yr un modd.

Prif god

Ar y pwynt hwn, mae angen ichi agor y ffeil App.js ac ychwanegu mewnforion ato:

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

Ar ôl hynny, ychwanegir swyddogaethau ategol a chysonion, a fydd yn ddefnyddiol yn ddiweddarach.

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

Wel, nawr gadewch i ni greu cydran o'r dosbarth App:

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

Mae'r elfen gyntaf, setI18nConfig(), yn gosod y cyfluniad cychwynnol.

Yna yn componentDidMount() mae angen i ni ychwanegu gwrandawyr digwyddiad, bydd yr elfen hon yn gwrando am ddiweddariadau ac yn galw handleLocalizationChange() pan fyddant yn digwydd.

Mae'r dull handleLocalizationChange() yn galw setI18nConfig() a forceUpdate(). Mae hyn yn angenrheidiol ar gyfer dyfeisiau Android, gan fod yn rhaid i'r gydran gael ei rendro er mwyn i'r newidiadau ddod yn weladwy.

Yna mae angen i ni dynnu'r gwrandäwr o'r dull componentWillUnmount().

Yn olaf, dychwelir hello mewn rendrad () trwy ddefnyddio translate() ac ychwanegu paramedr allweddol ato. Ar ôl y camau hyn, bydd y rhaglen yn gallu “deall” pa iaith sydd ei hangen a dangos negeseuon ynddi.

Lansio cais

Nawr yw'r amser i wirio sut mae'r cyfieithiad yn gweithio.

Yn gyntaf rydym yn rhedeg y rhaglen yn yr efelychydd neu'r efelychydd trwy deipio

$ adweithiol-rhedeg brodorol
$ react-brodorol rhedeg-android

Bydd yn edrych rhywbeth fel hyn:

Nawr gallwch chi geisio newid yr iaith i Ffrangeg trwy lansio'r rhaglen.

Rydyn ni'n gwneud yr un peth gyda'r iaith Arabeg, does dim gwahaniaeth.

Hyd yn hyn mae popeth yn mynd yn dda.

Ond beth sy'n digwydd os dewiswch iaith ar hap nad oes ganddi gyfieithiad yn yr ap?

Mae'n troi allan mai tasg findGorau Iaith yw darparu'r cyfieithiad gorau posibl ymhlith popeth sydd ar gael. O ganlyniad, bydd yr iaith a osodwyd yn ddiofyn yn cael ei harddangos.

Mae'n ymwneud â gosodiadau ffôn. Felly, er enghraifft, yn yr efelychydd iOS, gallwch weld trefn yr ieithoedd.

Os nad yr iaith a ddewiswyd yw'r dewis iaith, mae findBestAvailableLanguage yn dychwelyd heb ei ddiffinio fel bod yr iaith ddiofyn yn cael ei dangos.

Bonws

Mae gan react-native-localize API sy'n darparu mynediad i nifer fawr o elfennau iaith. Cyn dechrau gweithio, mae'n werth darllen y ddogfennaeth.

Canfyddiadau

Gellir gwneud y cais yn amlieithog heb unrhyw broblemau. Mae React-native-localize yn opsiwn gwych sy'n eich galluogi i ehangu ystod defnyddwyr eich cais.

Cod ffynhonnell y prosiect lleoli yma.

Mae Skillsbox yn argymell:

Cwrs ymarferol dwy flynedd "Rwy'n ddatblygwr gwe PRO".

Cwrs ar-lein "C# datblygwr o'r dechrau".

Cwrs blwyddyn ymarferol "Datblygwr PHP o 0 i PRO".

Ffynhonnell: hab.com

Rydym yn ysgrifennu cymhwysiad amlieithog ar React Native