🥇Kami ay sumusulat ng isang multilingual na application sa React Native

Napakahalaga ng localization ng produkto para sa mga internasyonal na kumpanya na naggalugad ng mga bagong bansa at rehiyon. Katulad nito, kailangan ang localization para sa mga mobile application. Kung magsisimula ang isang developer ng internasyonal na pagpapalawak, mahalagang bigyan ang mga user mula sa ibang bansa ng pagkakataon na magtrabaho kasama ang interface sa kanilang katutubong wika. Sa artikulong ito, gagawa kami ng React Native application gamit ang package react-native-localize.

Inirerekomenda ng Skillbox ang: Online na kursong pang-edukasyon "Propesyon Java Developer".
Pinapaalala namin sa iyo: para sa lahat ng mga mambabasa ng "Habr" - isang diskwento na 10 rubles kapag nag-enroll sa anumang kurso sa Skillbox gamit ang code na pang-promosyon ng "Habr".

Mga kasangkapan at kasanayan

Upang maunawaan ang artikulong ito, kailangan mo ng mga pangunahing kasanayan sa pagtatrabaho sa React Native. Upang maging pamilyar sa mga setting ng gumaganang makina, magagawa mo gamitin ang mga opisyal na tagubilin.

Kakailanganin namin ang mga bersyong ito ng mga tool sa software:

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

Pagsisimula

Gagawa kami ng application na susuporta sa English, French at Arabic. Una, gumawa kami ng bagong proyekto gamit ang react-native-cli. Upang gawin ito, kailangan mong i-type ito sa terminal:

$ react-native init multiLanguage
$ cd multiLanguage

Pagdaragdag ng mga kinakailangang aklatan

Ang unang hakbang ay ang pag-install ng react-native-localize sa pamamagitan ng pag-type ng sumusunod:
$ yarn magdagdag ng react-native-localize

Kung may mga problema sa panahon ng proseso ng pag-install, Ito ay nagkakahalaga ng pagbabasa ng manu-manong pag-install.

Ang react-native-localize library ay nagbibigay sa developer ng access sa mga feature na multilinggwal. Ngunit kailangan niya ng isa pang aklatan - i18n.

Inilalarawan ng artikulong ito ang paggamit I18n.js para makapagbigay ng pagsasalin sa JavaScript.

$ yarn idagdag ang i18n-js

Well, dahil ang i18n-js ay hindi nagbibigay ng caching o memoization, iminumungkahi ko ang paggamit ng lodash.memoize para dito:

$ sinulid magdagdag ng lodash.memoize

Paggawa gamit ang mga pagsasalin

Upang magawang gumana ang application sa iba pang mga wika, kailangan mo munang lumikha ng direktoryo ng mga pagsasalin sa loob ng src, pagkatapos ay tatlong JSON file para sa bawat wika.

1. en.json para sa Ingles;

2. fr.json para sa Pranses;

3. ar.json para sa Arabic.

Ang mga file na ito ay naglalaman ng mga JSON object na may mga key at value. Magiging pareho ang susi para sa bawat wika. Ito ay ginagamit ng application upang ipakita ang impormasyon ng teksto.

Ang value ay ang text na kailangang ipakita sa user.

Ingles:

{"hello": "Hello World!"}

Французский

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

Арабский

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

Maaari kang magdagdag ng iba pang mga wika sa parehong paraan.

Pangunahing code

Sa puntong ito, kailangan mong buksan ang App.js file at magdagdag ng mga import dito:

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

Pagkatapos nito, ang mga auxiliary function at constant ay idinagdag na magiging kapaki-pakinabang sa ibang pagkakataon.

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

Ngayon, gumawa tayo ng bahagi ng klase ng 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(), ay nagtatakda ng paunang configuration.

Pagkatapos ay kailangan mong magdagdag ng tagapakinig ng kaganapan sa componentDidMount(), makikinig ang elementong ito para sa mga update at tatawag sa handleLocalizationChange() kapag nangyari ang mga ito.

Ang paraan ng handleLocalizationChange() ay nagpapagana ng setI18nConfig() at forceUpdate(). Ito ay kinakailangan para sa mga Android device dahil dapat i-render ang bahagi para maging kapansin-pansin ang mga pagbabago.

Pagkatapos ay kailangan mong alisin ang pakikinig mula sa componentWillUnmount() na paraan.

Sa wakas, ang render() ay nagbabalik ng hello sa pamamagitan ng paggamit ng translate() at pagdaragdag ng isang pangunahing parameter dito. Pagkatapos ng mga hakbang na ito, magagawa ng application na "maunawaan" kung anong wika ang kailangan at magpakita ng mga mensahe dito.

Paglulunsad ng aplikasyon

Ngayon na ang oras upang suriin kung paano gumagana ang pagsasalin.

Una, inilunsad namin ang application sa simulator o emulator sa pamamagitan ng pag-type

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

Magiging ganito ang hitsura nito:

Ngayon ay maaari mong subukang baguhin ang wika sa French sa pamamagitan ng paglulunsad ng application.

Ganun din ang ginagawa namin sa Arabic, walang pinagkaiba.

So far so good.

Ngunit ano ang mangyayari kung pumili ka ng isang random na wika kung saan walang pagsasalin sa application?

Lumalabas na ang gawain ng findBestLanguage ay magbigay ng pinakamainam na pagsasalin mula sa lahat ng magagamit. Bilang resulta, ang default na wika ay ipapakita.

Pinag-uusapan natin ang tungkol sa mga setting ng telepono. Halimbawa, sa iOS emulator makikita mo ang pagkakasunud-sunod ng mga wika.

Kung ang piniling wika ay hindi ang gustong wika, ang findBestAvailableLanguage ay nagbabalik ng hindi natukoy upang ang default na wika ay maipakita.

Bonus

Ang react-native-localize ay may API na nagbibigay ng access sa isang malaking bilang ng mga elemento ng wika. Bago ka magsimula sa trabaho, Ito ay nagkakahalaga ng pagsuri sa dokumentasyon.

Natuklasan

Ang application ay maaaring gawin multilingual nang walang anumang mga problema. Ang React-native-localize ay isang magandang opsyon na nagbibigay-daan sa iyong palawakin ang user base ng iyong app.

Source code ng proyekto Nandito.

Inirerekomenda ng Skillbox ang:

Dalawang taong praktikal na kurso "Ako ay isang PRO web developer".

Online na kurso "C# developer mula sa simula".

Praktikal na kurso sa taon "PHP developer mula 0 hanggang PRO".

Pinagmulan: www.habr.com

Pagsusulat ng isang multilingual na application sa React Native