🥇Við erum að skrifa fjöltyngt forrit í React Native

Staðsetning vöru er mjög mikilvæg fyrir alþjóðleg fyrirtæki sem skoða ný lönd og svæði. Að sama skapi er staðfærsla nauðsynleg fyrir farsímaforrit. Ef þróunaraðili byrjar alþjóðlega útrás er mikilvægt að gefa notendum frá öðru landi tækifæri til að vinna með viðmótið á móðurmáli sínu. Í þessari grein munum við búa til React Native forrit með því að nota pakkann bregðast-innfæddur-staðsetja.

Skillbox mælir með: Fræðslunámskeið á netinu "Profession Java verktaki".
Við minnum á: fyrir alla Habr lesendur - 10 rúblur afsláttur þegar þú skráir þig á hvaða Skillbox námskeið sem er með því að nota Habr kynningarkóðann.

Verkfæri og færni

Til að skilja þessa grein þarftu grunnfærni í að vinna með React Native. Til að kynna þér stillingar vinnuvélarinnar geturðu nota opinberu leiðbeiningarnar.

Við munum þurfa þessar útgáfur af hugbúnaðarverkfærum:

Hnútur v10.15.0
npm 6.4.1
garn 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Hafist handa

Við munum búa til forrit sem mun styðja ensku, frönsku og arabísku. Fyrst búum við til nýtt verkefni með því að nota react-native-cli. Til að gera þetta þarftu að slá þetta inn í flugstöðina:

$ react-native init multiLanguage
$ cd multiLanguage

Að bæta við nauðsynlegum bókasöfnum

Fyrsta skrefið er að setja upp react-native-localize með því að slá inn eftirfarandi:
$ garn bæta við react-native-localize

Ef vandamál koma upp við uppsetningarferlið, Það er þess virði að lesa uppsetningarhandbókina.

React-native-localize bókasafnið veitir verktaki aðgang að fjöltyngdum eiginleikum. En hún þarf eitt bókasafn í viðbót - i18n.

Þessi grein lýsir notkuninni I18n.js til að veita þýðingu á JavaScript.

$ garn bæta við i18n-js

Jæja, þar sem i18n-js býður ekki upp á skyndiminni eða minnisskráningu, legg ég til að þú notir lodash.memoize fyrir þetta:

$ garn bæta lodash.memoize

Vinna við þýðingar

Til þess að forritið geti unnið með öðrum tungumálum þarftu fyrst að búa til þýðingarskrá inni í src, síðan þrjár JSON skrár fyrir hvert tungumál.

1. en.json fyrir ensku;

2. fr.json fyrir frönsku;

3. ar.json fyrir arabísku.

Þessar skrár innihalda JSON hluti með lyklum og gildum. Lykillinn verður sá sami fyrir hvert tungumál. Það er notað af forritinu til að birta textaupplýsingar.

Gildi er textinn sem þarf að sýna notandanum.

Enska:

{"hello": "Halló heimur!"}

Французский

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

Arabar

{ "halló": "Síðan"}

Þú getur bætt við öðrum tungumálum á sama hátt.

Aðalkóði

Á þessum tímapunkti þarftu að opna App.js skrána og bæta innflutningi við hana:

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

Eftir þetta bætast við aukaaðgerðir og fastar sem nýtast síðar.

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

Jæja, nú skulum við búa til hluti af App bekknum:

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

Fyrsti þátturinn, setI18nConfig(), setur upphafsstillinguna.

Síðan þarftu að bæta atburðahlustara við componentDidMount(), þessi þáttur mun hlusta eftir uppfærslum og kalla handleLocalizationChange() þegar þær gerast.

HandleLocalizationChange() aðferðin virkjar setI18nConfig() og forceUpdate(). Þetta er nauðsynlegt fyrir Android tæki þar sem íhlutinn verður að vera sýndur til að breytingarnar verði áberandi.

Þá þarftu að fjarlægja hlustunina úr componentWillUnmount() aðferðinni.

Að lokum, render() skilar halló með því að nota translate() og bæta lykilbreytu við hana. Eftir þessi skref mun forritið geta „skilið“ hvaða tungumál er þörf og birt skilaboð á því.

Ræsing forrits

Nú er kominn tími til að athuga hvernig þýðingin virkar.

Í fyrsta lagi ræsum við forritið í herminum eða hermi með því að slá inn

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

Það mun líta einhvern veginn svona út:

Nú geturðu prófað að breyta tungumálinu í frönsku með því að ræsa forritið.

Við gerum það sama með arabísku, það er enginn munur.

Svo langt svo gott.

En hvað gerist ef þú velur handahófskennt tungumál sem engin þýðing er fyrir í forritinu?

Það kemur í ljós að verkefni findBestLanguage er að veita bestu þýðingu úr öllum tiltækum. Þar af leiðandi mun sjálfgefið tungumál birtast.

Við erum að tala um símastillingar. Til dæmis, í iOS keppinautnum geturðu séð röð tungumála.

Ef valið tungumál er ekki valið tungumál skilar findBestAvailableLanguage óskilgreint þannig að sjálfgefið tungumál sést.

Bónus

react-native-localize er með API sem veitir aðgang að miklum fjölda tungumálaþátta. Áður en þú byrjar að vinna, Það er þess virði að skoða skjölin.

Niðurstöður

Hægt er að gera forritið fjöltyngt án vandræða. React-native-localize er frábær valkostur sem gerir þér kleift að stækka notendahóp appsins þíns.

Frumkóði verkefnisins er hér.

Skillbox mælir með:

Tveggja ára verklegt nám „Ég er PRO vefhönnuður“.

Rafræn fræðsla "C# verktaki frá grunni".

Hagnýtt eins árs nám "PHP verktaki frá 0 til PRO".

Heimild: www.habr.com

Að skrifa fjöltyngt forrit í React Native