Nulis aplikasi multibasa dina React Native

Lokalisasi produk penting pisan pikeun perusahaan internasional anu ngajalajah nagara sareng daérah anyar. Nya kitu, lokalisasi diperlukeun pikeun aplikasi mobile. Lamun pamekar dimimitian ékspansi internasional, hal anu penting pikeun masihan pamaké ti nagara sejen kasempetan pikeun digawekeun ku panganteur dina basa asli maranéhanana. Dina tulisan ieu, urang bakal nyiptakeun aplikasi React Native nganggo pakét meta-pribumi-lokalkeun.

Skillbox nyarankeun: Kursus online atikan "Pamekar Profesi Java".
Kami ngingetan: pikeun sakabéh pamiarsa "Habr" - diskon 10 rubles nalika enrolling dina sagala Tangtu Skillbox ngagunakeun "Habr" kode promosi.

Alat jeung kaahlian

Pikeun ngartos tulisan ieu, anjeun peryogi kaahlian dasar dina damel sareng React Native. Pikeun familiarize diri jeung setélan tina mesin kerja, anjeun tiasa ngagunakeun parentah resmi.

Urang peryogi vérsi alat parangkat lunak ieu:

• Node v10.15.0
• npm 6.4.1
• benang 1.16.0
• meta-pribumi 0.59.9
• meta-asli-localize 1.1.3
• i18n-js 3.3.0

Mimiti

Kami bakal nyiptakeun aplikasi anu bakal ngadukung Inggris, Perancis sareng Arab. Kahiji urang nyieun hiji proyék anyar maké react-native-cli. Jang ngalampahkeun ieu, anjeun kedah ngetik ieu dina terminal:

$ react-native init multiLanguage
$ cd multiBasa

Nambahkeun perpustakaan perlu

Hambalan munggaran nyaéta masang react-native-localize ku ngetikkeun ieu:
$ benang tambahkeun meta-native-localize

Upami aya masalah nalika prosés instalasi, Éta patut maca manual instalasi.

Perpustakaan réact-native-localize masihan pamekar aksés kana fitur multibasa. Tapi anjeunna peryogi hiji deui perpustakaan - i18n.

Artikel ieu ngajelaskeun pamakéan I18n.js pikeun nyadiakeun tarjamahan kana JavaScript.

$ benang nambahkeun i18n-js

Nya, saprak i18n-js henteu nyayogikeun cache atanapi memoization, kuring nyarankeun ngagunakeun lodash.memoize pikeun ieu:

$ benang nambahkeun lodash.memoize

Gawe sareng tarjamahan

Supados aplikasi tiasa dianggo sareng basa sanés, anjeun kedah nyiptakeun diréktori tarjamahan di jero src, teras tilu file JSON pikeun unggal basa.

1. en.json pikeun basa Inggris;

2. fr.json pikeun Perancis;

3. ar.json pikeun basa Arab.

File ieu ngandung objék JSON sareng konci sareng nilai. Koncina bakal sami pikeun unggal basa. Hal ieu dianggo ku aplikasi pikeun nampilkeun inpormasi téks.

Nilai mangrupikeun téks anu kedah ditingalikeun ka pangguna.

Inggris:

{"Halo": "Halo Dunya!"}

Perancis

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

Арабский

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

Anjeun tiasa nambihan basa sanés dina cara anu sami.

Kodeu utama

Dina titik ieu, anjeun kedah muka file App.js sareng nambihan impor kana:

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

Sanggeus ieu, fungsi bantu sarta konstanta ditambahkeun anu bakal mangpaat engké.

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

Nya, ayeuna hayu urang nyiptakeun komponén kelas 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
  }
});

Unsur kahiji, setI18nConfig (), Nyetél konfigurasi awal.

Lajeng anjeun kudu nambahan hiji pangdéngé acara pikeun componentDidMount (), unsur ieu bakal ngadangukeun apdet sarta nelepon handleLocalizationChange () nalika aranjeunna lumangsung.

Metoda handleLocalizationChange () ngaktifkeun setI18nConfig () sarta forceUpdate (). Ieu diperlukeun pikeun alat Android salaku komponén kudu rendered pikeun parobahan jadi noticeable.

Satuluyna anjeun perlu nyabut déngékeun ti componentWillUnmount () métode.

Tungtungna, render () mulih halo ku ngagunakeun tarjamah () jeung nambahkeun parameter konci na. Saatos léngkah-léngkah ieu, aplikasi bakal tiasa "ngartos" basa naon anu diperyogikeun sareng nampilkeun pesen di jerona.

peluncuran aplikasi

Ayeuna nya éta waktu pikeun pariksa kumaha tarjamahan jalan.

Kahiji, urang ngajalankeun aplikasi dina simulator atawa émulator ku ngetikkeun

$ meta-pribumi run-ios
$ meta-pribumi run-android

Éta bakal katingali sapertos kieu:

Ayeuna anjeun tiasa nyobian ngarobih basa ka Perancis ku ngaluncurkeun aplikasina.

Urang sami sareng Arab, teu aya bédana.

Dugi ayeuna mah saé.

Tapi naon anu kajantenan upami anjeun milih basa acak anu henteu aya tarjamahan dina aplikasina?

Tétéla yén tugas findBestLanguage nyaéta nyayogikeun tarjamahan anu optimal tina sadaya anu sayogi. Hasilna, basa standar bakal dipintonkeun.

Urang ngobrol ngeunaan setelan telepon. Contona, dina émulator ios anjeun tiasa ningali urutan basa.

Lamun basa nu dipilih lain basa nu dipikaresep, findBestAvailableLanguage balik deui teu ditangtukeun ku kituna basa standar ditémbongkeun.

Bonus

meta-native-localize boga API nu nyadiakeun aksés ka angka nu gede ngarupakeun elemen basa. Sateuacan anjeun ngamimitian damel, Éta patut pariksa kaluar dokuméntasi.

papanggihan

Aplikasina tiasa dilakukeun multibasa tanpa aya masalah. React-native-localize mangrupikeun pilihan anu saé anu ngamungkinkeun anjeun ngalegaan basa pangguna aplikasi anjeun.

Kodeu sumber proyék aya di dieu.

Skillbox nyarankeun:

• Kursus praktis dua taun "Kuring pamekar wéb PRO".
• Tangtu online "C # pamekar ti scratch".
• Kursus taun praktis "Pamekar PHP ti 0 ka PRO".

sumber: www.habr.com