🥇Em di React Native | de serîlêdanek pirzimanî dinivîsin ProHoster

Herêmîkirina hilberan ji bo pargîdaniyên navneteweyî yên ku li welat û herêmên nû digerin pir girîng e. Bi heman rengî, ji bo sepanên mobîl herêmîkirin hewce ye. Ger pêşdebirek berfirehbûna navneteweyî dest pê bike, girîng e ku meriv ji bikarhênerên ji welatek din re fersendê bide ku bi navgîniya bi zimanê xwe yê zikmakî re bixebitin. Di vê gotarê de, em ê bi karanîna pakêtê serîlêdanek React Native biafirînin reaksîyon-xwecihî-herêmî kirin.

Skillbox pêşniyar dike: Kursa perwerdehiya serhêl "Pîşesaziya Java Developer".
Em bînin bîra xwe: ji bo hemî xwendevanên "Habr" - dema ku hûn beşdarî qursek Skillbox-ê bi karanîna koda danasînê ya "Habr" têne qeyd kirin 10 rubleyan dakêşin.

Amûr û jêhatîbûn

Ji bo ku hûn vê gotarê fam bikin, hûn di xebata bi React Native re hewceyê jêhatîbûnên bingehîn in. Ji bo ku hûn xwe bi mîhengên makîneya xebatê nas bikin, hûn dikarin talîmatên fermî bikar bînin.

Em ê hewceyê van guhertoyên amûrên nermalavê bikin:

Node v10.15.0
npm 6.4.1
yarn 1.16.0
reaktîf-xwecihî 0.59.9
reaksîyon-xwecihî-herêmî 1.1.3
i18n-js 3.3.0

Destpêkirin

Em ê serîlêdanek ku piştgirîya îngilîzî, fransî û erebî bike çêbikin. Pêşî em bi karanîna react-native-cli projeyek nû diafirînin. Ji bo vê yekê, hûn hewce ne ku di termînalê de vê binivîse:

$ react-native init multiLanguage
$ cd pirzimanî

Zêdekirina pirtûkxaneyên pêwîst

Gava yekem ev e ku hûn react-native-localize bi nivîsandina jêrîn saz bikin:
$ yarn lê zêde bike react-native-localize

Ger di pêvajoya sazkirinê de pirsgirêk çêbibin, Hêjayî xwendina manuala sazkirinê ye.

Pirtûkxaneya react-native-localize dide pêşdebiran ku bigihîje taybetmendiyên pirzimanî. Lê wê hewceyê pirtûkxaneyek din - i18n.

Ev gotar karanîna wê diyar dike I18n.js ji bo ku wergerandina JavaScriptê peyda bike.

$ yarn i18n-js zêde bike

Welê, ji ber ku i18n-js caching an bîranînê peyda nake, ez ji bo vê yekê pêşniyar dikim lodash.memoize bikar bînin:

$ yarn lê zêde bike lodash.memoize

Bi wergeran re dixebitin

Ji bo ku serîlêdan bikaribe bi zimanên din re bixebite, hûn pêşî hewce ne ku pelrêçek wergerandinê di hundurê src-ê de, paşê ji bo her zimanî sê pelên JSON çêbikin.

1. en.json ji bo Îngilîzî;

2. fr.json bo fransî;

3. ar.json bo erebî.

Di van pelan de tiştên JSON ên bi key û nirx hene. Mifteya her zimanî dê yek be. Ew ji hêla serîlêdanê ve tê bikar anîn da ku agahdariya nivîsê nîşan bide.

Nirx nivîsa ku divê ji bikarhênerê re were xuyang kirin e.

Îngilîzî:

{"silav": "Silav Cîhan!"}

Fransî

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

Erebî

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

Hûn dikarin bi heman awayî zimanên din lê zêde bikin.

Koda sereke

Di vê nuqteyê de, hûn hewce ne ku pelê App.js vekin û îthalan lê zêde bikin:

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

Piştî vê yekê, fonksiyonên alîkar û domdar têne zêdekirin ku dê paşê bikêr bibin.

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ê, naha em beşek ji çîna App-ê biafirînin:

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

Hêmana yekem, setI18nConfig (), veavakirina destpêkê saz dike.

Dûv re hûn hewce ne ku guhdarek bûyerek li componentDidMount() zêde bikin, ev hêman dê guh bide nûvekirinan û gava ku ew çêbibin bang li handleLocalizationChange() bike.

Rêbaza handleLocalizationChange() setI18nConfig() û forceUpdate() çalak dike. Ev ji bo cîhazên Android-ê hewce ye ji ber ku ji bo ku guheztin xuya bibin pêdivî ye ku hêman were çêkirin.

Dûv re hûn hewce ne ku guhdarîkirinê ji rêbaza componentWillUnmount() derxînin.

Di dawiyê de, render() silav vedigerîne bi karanîna translate() û lê zêdekirina pîvanek sereke li wê. Piştî van gavan, serîlêdan dê bikaribe "fêm bike" bi kîjan zimanî hewce ye û di wê de peyaman nîşan bide.

Destpêkirina sepanê

Niha wext e ku meriv kontrol bike ka werger çawa dixebite.

Pêşîn, em bi nivîsandinê serîlêdanê di simulator an emulatorê de dest pê dikin

$ react-xwecihî run-ios
$ react-native run-android

Ew ê tiştek wusa xuya bike:

Naha hûn dikarin bi destpêkirina serîlêdanê ve biceribînin ku ziman bi fransî biguhezînin.

Em bi erebî jî heman tiştî dikin, tu ferq tune.

Çiqas dûr awqas baş.

Lê heke hûn zimanek rasthatî hilbijêrin ku di serîlêdanê de werger tune be, çi dibe?

Derket holê ku peywira findBestLanguage ew e ku ji hemî yên berdest wergera çêtirîn peyda bike. Wekî encamek, zimanê xwerû dê were xuyang kirin.

Em li ser mîhengên têlefonê diaxivin. Mînakî, di emulatora iOS-ê de hûn dikarin rêza zimanan bibînin.

Ger zimanê hilbijartî ne zimanê bijartî be, findBestAvailableLanguage ne diyar vedigere da ku zimanê xwerû were xuyang kirin.

Xelat

react-native-localize xwedan API ye ku gihîştina hejmareke mezin ji hêmanên zimanî peyda dike. Berî ku hûn dest bi kar bikin, Ew hêja ye ku belgeyê kontrol bikin.

vebiguherin

Serlêdan dikare bê pirsgirêk pirzimanî were çêkirin. React-native-localize vebijarkek girîng e ku dihêle hûn bingeha bikarhênerê serîlêdana xwe berfireh bikin.

Koda çavkaniya projeyê li vir e.

Skillbox pêşniyar dike:

Kursa pratîkî ya du-salî "Ez pêşdebirek malperê PRO me".

Kursa serhêl "C# pêşdebiran ji sifirê".

Kursa sala pratîk "Pêşvebirê PHP ji 0 heta PRO".

Source: www.habr.com

Di React Native de serîlêdanek pirzimanî dinivîsin