🥇Tikulemba zilankhulo zambiri mu React Native

Kukhazikitsa kwazinthu ndikofunikira kwambiri kwamakampani apadziko lonse lapansi omwe akufufuza mayiko ndi zigawo zatsopano. Momwemonso, kumasulira kumafunikira pamapulogalamu am'manja. Ngati wopanga mapulogalamu ayamba kukulitsa mayiko, ndikofunikira kupatsa ogwiritsa ntchito ochokera kudziko lina mwayi wogwiritsa ntchito mawonekedwe m'chilankhulo chawo. Munkhaniyi, tipanga pulogalamu ya React Native pogwiritsa ntchito phukusi react-native-localize.

Skillbox imalimbikitsa: Maphunziro aulere pa intaneti "Professional Java developer".
Tikukukumbutsani: kwa owerenga onse a Habr - kuchotsera ma ruble 10 polembetsa maphunziro aliwonse a Skillbox pogwiritsa ntchito nambala yotsatsira ya Habr.

Zida ndi luso

Kuti mumvetse nkhaniyi, mukufunikira maluso oyambira pantchito ndi React Native. Kuti mudziwe makonda a makina ogwira ntchito, mutha gwiritsani ntchito malangizo ovomerezeka.

Tifunika mitundu iyi ya zida zamapulogalamu:

Njira v10.15.0
npm 6.4.1
nsalu 1.16.0
mbadwa za 0.59.9
kuchita-native-localize 1.1.3
i18n-js 3.3.0

Kuyamba

Tipanga pulogalamu yomwe imathandizira Chingerezi, Chifalansa ndi Chiarabu. Choyamba timapanga pulojekiti yatsopano pogwiritsa ntchito react-native-cli. Kuti muchite izi, muyenera kulemba izi mu terminal:

$ react-native init multiLanguage
$ cd multiLanguage

Kuwonjezera malaibulale zofunika

Gawo loyamba ndikukhazikitsa react-native-localize polemba izi:
$ ulusi onjezani react-native-localize

Ngati mavuto achitika panthawi ya kukhazikitsa, Ndikoyenera kuwerenga buku lokhazikitsa.

Laibulale ya react-native-localize imapatsa woyambitsa mwayi wogwiritsa ntchito zinenero zambiri. Koma akufunika laibulale imodzi - i18n.

Nkhaniyi ikufotokoza ntchito I18n.js kuti apereke zomasulira mu JavaScript.

$ yarn onjezani i18n-js

Chabwino, popeza i18n-js sapereka caching kapena kuloweza pamtima, ndikupempha kugwiritsa ntchito lodash.memoize pa izi:

$ ulusi onjezani lodash.memoize

Kugwira ntchito ndi zomasulira

Kuti pulogalamuyo igwire ntchito ndi zilankhulo zina, choyamba muyenera kupanga chikwatu chomasulira mkati mwa src, kenako mafayilo atatu a JSON pachilankhulo chilichonse.

1. en.json ya Chingerezi;

2. fr.json kwa Chifalansa;

3. ar.json kwa Chiarabu.

Mafayilowa ali ndi zinthu za JSON zomwe zili ndi makiyi ndi mfundo zake. Mfungulo idzakhala yofanana pa chinenero chilichonse. Imagwiritsidwa ntchito ndi pulogalamu kuwonetsa zambiri zamawu.

Mtengo ndi mawu omwe akuyenera kuwonetsedwa kwa wogwiritsa ntchito.

Chingerezi:

{"hello": "Moni Padziko Lonse!"}

French

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

Chiarabu

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

Mutha kuwonjezera zilankhulo zina mwanjira yomweyo.

Main kodi

Pakadali pano, muyenera kutsegula fayilo ya App.js ndikuwonjezera zolowa kunja:

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

Pambuyo pake, ntchito zothandizira ndi zokhazikika zimawonjezedwa zomwe zingakhale zothandiza pambuyo pake.

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

Chabwino, tsopano tiyeni tipange gawo la App class:

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

Chinthu choyamba, setI18nConfig(), chimakhazikitsa kasinthidwe koyambirira.

Kenako muyenera kuwonjezera womvera zochitika ku componentDidMount(), chinthuchi chimvera zosintha ndikuyimbira handleLocalizationChange() zikachitika.

Njira ya HandleLocalizationChange() imayatsa setI18nConfig() ndi forceUpdate(). Izi ndizofunikira pazida za Android popeza gawolo liyenera kuperekedwa kuti zosintha ziwonekere.

Kenako muyenera kuchotsa kumvetsera kwa componentWillUnmount() njira.

Pomaliza, render() imabweza moni pogwiritsa ntchito translate() ndikuwonjezera gawo lalikulu kwa izo. Pambuyo pa izi, pulogalamuyi idzatha "kumvetsetsa" chinenero chomwe chikufunika ndikuwonetsa mauthenga mmenemo.

Kuyambitsa ntchito

Ino ndi nthawi yoti muwone momwe kumasulira kumagwirira ntchito.

Choyamba, timayambitsa pulogalamuyo mu simulator kapena emulator polemba

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

Idzawoneka motere:

Tsopano mutha kuyesa kusintha chilankhulo kukhala Chifalansa poyambitsa pulogalamuyo.

Timachita chimodzimodzi ndi Chiarabu, palibe kusiyana.

Pakadali pano, zili bwino.

Koma bwanji ngati mutasankha chinenero chomwe sichimasuliridwa mu pulogalamuyi?

Zinapezeka kuti ntchito ya findBestLanguage ndikupereka matanthauzidwe abwino kwambiri kuchokera kuzomwe zilipo. Zotsatira zake, chilankhulo chosasinthika chidzawonetsedwa.

Tikulankhula za zoikamo foni. Mwachitsanzo, mu iOS emulator mukhoza kuona dongosolo zinenero.

Ngati chilankhulo chomwe mwasankha sichiyankhulo chomwe mukufuna, findBestAvailableLanguage imabweza osafotokozedwa kotero kuti chilankhulo chokhazikika chiwonetsedwe.

Bonasi

react-native-localize ili ndi API yomwe imapereka mwayi wopeza zinthu zambiri zachilankhulo. Musanayambe ntchito, Ndikoyenera kuyang'ana zolembazo.

anapezazo

Kugwiritsa ntchito kumatha kupangidwa kukhala zinenero zambiri popanda vuto lililonse. React-native-localize ndi njira yabwino kwambiri yomwe imakulolani kuti muwonjezere ogwiritsa ntchito pulogalamu yanu.

Project source kodi ili pano.

Skillbox imalimbikitsa:

Zaka ziwiri zothandiza maphunziro "Ndine wopanga mawebusayiti a PRO".

Njira yapaintaneti "C # wopanga kuyambira pachiyambi".

Maphunziro othandiza a chaka chimodzi "Wopanga PHP kuchokera ku 0 kupita ku PRO".

Source: www.habr.com

Kulemba kugwiritsa ntchito zinenero zambiri mu React Native