🥇Nagsulat kami usa ka multilinggwal nga aplikasyon sa React Native

Ang lokalisasyon sa mga produkto hinungdanon kaayo alang sa mga internasyonal nga kompanya nga nagpalambo sa bag-ong mga nasud ug rehiyon. Sa susama, gikinahanglan ang localization alang sa mga mobile application. Kung ang usa ka developer magsugod sa internasyonal nga pagpalapad, importante ang paghatag sa mga tiggamit gikan sa laing nasud sa oportunidad sa pagtrabaho uban sa interface sa ilang lumad nga pinulongan. Niini nga artikulo, maghimo kami usa ka React Native app gamit ang package react-native-localize.

Girekomenda sa Skillbox: Online nga kurso sa edukasyon "Propesyon nga Java Developer".
Gipahinumduman namon ikaw: alang sa tanan nga mga magbabasa sa "Habr" - usa ka diskwento sa 10 nga mga rubles kung nagpalista sa bisan unsang kurso sa Skillbox gamit ang code sa promosyon nga "Habr".

Mga himan ug kahanas

Ang pagsabut niini nga artikulo nanginahanglan sukaranang kahanas sa React Native. Aron masinati ang mga setting sa nagtrabaho nga makina, mahimo nimo gamita ang opisyal nga instruksyon.

Kinahanglan namon kini nga mga bersyon sa mga himan sa software:

Node v10.15.0
npm 6.4.1
hilo 1.16.0
react-lumad 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Pagsugod

Maghimo kami usa ka aplikasyon nga mosuporta sa English, French ug Arabic. Una naghimo kami usa ka bag-ong proyekto gamit ang react-native-cli. Aron mahimo kini, sa terminal kinahanglan nimo nga i-type kini:

$ react-native init multiLanguage
$ cd multilanguage

Pagdugang sa gikinahanglan nga mga librarya

Ang unang lakang mao ang pag-instalar sa react-native-localize pinaagi sa pag-type sa mosunod:
$ yarn add react-native-localize

Kung makasugat ka og mga problema sa panahon sa proseso sa pag-instalar, tan-awa ang instalasyon nga manwal.

Ang react-native-localize nga librarya naghatag sa developer og access sa multilinggwal nga mga feature. Apan kinahanglan niya ang lain nga librarya - i18n.

Gihubit sa artikulo ang paggamit I18n.js para makahatag ug hubad sa JavaScript.

$ hilo idugang ang i18n-js

Aw, tungod kay ang i18n-js wala maghatag caching o memoization, gisugyot nako ang paggamit sa lodash.memoize alang niini:

$ hilo idugang ang lodash.memoize

Pagtrabaho uban sa mga hubad

Aron ang aplikasyon magamit sa ubang mga pinulongan, kinahanglan una nimong maghimo ug direktoryo sa paghubad sulod sa src, dayon tulo ka JSON nga mga file alang sa matag usa sa mga pinulongan.

1. en.json para sa English;

2. fr.json para sa Pranses;

3. ar.json para sa Arabiko.

Kini nga mga file adunay JSON nga mga butang nga adunay mga yawe ug mga kantidad. Ang yawe managsama alang sa matag pinulongan. Gigamit kini sa aplikasyon aron ipakita ang kasayuran sa teksto.

Ang bili (value) mao ang teksto nga kinahanglang ipakita sa tiggamit.

English:

{"hello": "Hello World!"}

Pranses

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

Арабский

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

Ang ubang mga pinulongan mahimong idugang sa samang paagi.

Panguna nga kodigo

Niini nga punto, kinahanglan nimong ablihan ang App.js file ug idugang ang mga import niini:

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

Pagkahuman niana, ang mga auxiliary function ug constants gidugang, nga magamit sa ulahi.

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

Aw, karon maghimo kita usa ka bahin sa klase sa 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
  }
});

Ang unang elemento, setI18nConfig(), nagtakda sa inisyal nga configuration.

Dayon kinahanglan natong idugang ang usa ka tigpaminaw sa panghitabo sa componentDidMount() , kini nga elemento maminaw sa mga update ug motawag sa handleLocalizationChange() kon kini mahitabo.

Ang handleLocalizationChange() nga pamaagi nag-awhag sa setI18nConfig() ug forceUpdate(). Kinahanglan kini alang sa mga aparato sa Android, tungod kay ang sangkap kinahanglan i-render aron makita ang mga pagbag-o.

Dayon kinahanglan natong tangtangon ang tigpaminaw gikan sa componentWillUnmount() nga pamaagi.

Sa kataposan, ang hello gibalik sa render() pinaagi sa paggamit sa translate() ug pagdugang ug key parameter niini. Pagkahuman niini nga mga lakang, ang aplikasyon makahimo sa "pagsabut" kung unsang lengguwahe ang gikinahanglan ug ipakita ang mga mensahe niini.

Paglansad sa aplikasyon

Karon na ang panahon sa pagsusi kung giunsa ang paghubad.

Una among gipadagan ang aplikasyon sa simulator o emulator pinaagi sa pag-type

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

Kini tan-awon sama niini:

Karon mahimo nimong sulayan nga usbon ang pinulongan sa French pinaagi sa paglansad sa aplikasyon.

Ingon usab ang among gibuhat sa pinulongang Arabiko, wala’y kalainan.

Sa pagkakaron maayo ang tanan.

Apan unsa ang mahitabo kung magpili ka usa ka random nga sinultian nga wala’y hubad sa app?

Kini nahimo nga ang tahas sa findBestLanguage mao ang paghatag sa labing kaayo nga posible nga paghubad taliwala sa tanan nga magamit. Ingon nga resulta, ang pinulongan nga gitakda sa default ipakita.

Mahitungod kini sa mga setting sa telepono. Busa, pananglitan, sa iOS emulator, imong makita ang han-ay sa mga pinulongan.

Kung ang gipili nga lengguwahe dili ang gusto nga lengguwahe, ang findBestAvailableLanguage mobalik nga dili matino aron ang default nga lengguwahe mapakita.

Bonus

Ang react-native-localize adunay API nga naghatag og access sa daghang mga elemento sa pinulongan. Sa wala pa magsugod ang trabaho, angay nga basahon ang dokumentasyon.

kaplag

Ang aplikasyon mahimo nga daghang pinulongan nga wala’y mga problema. Ang React-native-localize usa ka maayong kapilian nga nagtugot kanimo sa pagpalapad sa sakup sa mga tiggamit sa imong aplikasyon.

Source code sa proyekto nahimutang dinhi.

Girekomenda sa Skillbox:

Duha ka tuig nga praktikal nga kurso "Ako usa ka PRO web developer".

Online nga kurso "C# developer gikan sa scratch".

Praktikal nga tuig nga kurso "PHP developer gikan sa 0 ngadto sa PRO".

Source: www.habr.com

Nagsulat kami ug usa ka multilinggwal nga aplikasyon sa React Native