🥇Kita nulis aplikasi multibasa ing React Native

Lokalisasi produk penting banget kanggo perusahaan internasional sing njelajah negara lan wilayah anyar. Kajaba iku, lokalisasi dibutuhake kanggo aplikasi seluler. Yen pangembang miwiti ekspansi internasional, penting kanggo menehi pangguna saka negara liya kesempatan kanggo nggarap antarmuka ing basa pribumi. Ing artikel iki, kita bakal nggawe aplikasi React Native nggunakake paket kasebut react-native-localize.

Skillbox nyaranake: Kursus online pendidikan "Profesi Java Developer".
Kita ngelingake: kanggo kabeh sing maca "Habr" - diskon 10 rubel nalika ndhaptar kursus Skillbox nggunakake kode promosi "Habr".

Piranti lan katrampilan

Kanggo ngerti artikel iki, sampeyan butuh katrampilan dhasar kanggo nggarap React Native. Kanggo familiarize dhewe karo setelan saka mesin apa, sampeyan bisa nggunakake instruksi resmi.

Kita mbutuhake versi piranti lunak iki:

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

Miwiti

Kita bakal nggawe aplikasi sing bakal ndhukung Inggris, Prancis lan Arab. Pisanan kita nggawe proyek anyar nggunakake react-native-cli. Kanggo nindakake iki, sampeyan kudu ngetik iki ing terminal:

$ react-native init multiLanguage
$ cd multibasa

Nambah perpustakaan sing dibutuhake

Langkah pisanan yaiku nginstal react-native-localize kanthi ngetik ing ngisor iki:
$ benang nambah react-native-localize

Yen ana masalah nalika proses instalasi, Iku worth maca manual instalasi.

Pustaka react-native-localize menehi akses pangembang menyang fitur multibasa. Nanging dheweke butuh perpustakaan liyane - i18n.

Artikel iki njlèntrèhaké panggunaan I18n.js kanggo nyedhiyakake terjemahan menyang JavaScript.

$ benang nambah i18n-js

Ya, amarga i18n-js ora nyedhiyakake caching utawa memoisasi, aku saranake nggunakake lodash.memoize kanggo iki:

$ benang nambah lodash.memoize

Nggarap terjemahan

Supaya aplikasi bisa digunakake karo basa liyane, sampeyan kudu nggawe direktori terjemahan ing src, banjur telung file JSON kanggo saben basa.

1. en.json kanggo Inggris;

2. fr.json kanggo Prancis;

3. ar.json kanggo basa Arab.

File kasebut ngemot obyek JSON kanthi kunci lan nilai. Tombol bakal padha kanggo saben basa. Iki digunakake dening aplikasi kanggo nampilake informasi teks.

Nilai minangka teks sing kudu dituduhake menyang pangguna.

Inggris:

{"halo": "Hello World!"}

Perancis

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

Арабский

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

Sampeyan bisa nambah basa liyane kanthi cara sing padha.

Kode utama

Ing wektu iki, sampeyan kudu mbukak file App.js lan nambah impor menyang:

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

Sawise iki, fungsi tambahan lan konstanta ditambahake sing bakal migunani mengko.

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

Saiki ayo nggawe komponen 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 pisanan, setI18nConfig (), nyetel konfigurasi dhisikan.

Banjur sampeyan kudu nambah pamireng acara kanggo componentDidMount (), unsur iki bakal ngrungokake nganyari lan nelpon handleLocalizationChange () nalika padha kelakon.

Cara handleLocalizationChange () ngaktifake setI18nConfig () lan forceUpdate (). Iki perlu kanggo piranti Android amarga komponen kasebut kudu diwenehake supaya owah-owahan katon.

Banjur sampeyan kudu mbusak ngrungokake saka cara componentWillUnmount ().

Pungkasan, render () ngasilake hello kanthi nggunakake translate () lan nambahake parameter kunci kasebut. Sawise langkah kasebut, aplikasi bakal bisa "ngerti" basa apa sing dibutuhake lan nampilake pesen ing kono.

Peluncuran aplikasi

Saiki wektune kanggo mriksa cara kerjane terjemahan.

Pisanan, kita miwiti aplikasi ing simulator utawa emulator kanthi ngetik

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

Bakal katon kaya iki:

Saiki sampeyan bisa nyoba ngganti basa menyang Prancis kanthi mbukak aplikasi kasebut.

Kita nindakake bab sing padha karo basa Arab, ora ana bedane.

Nganti saiki apik.

Nanging apa sing kedadeyan yen sampeyan milih basa acak sing ora ana terjemahan ing aplikasi kasebut?

Pranyata tugas findBestLanguage yaiku nyedhiyakake terjemahan sing optimal saka kabeh sing kasedhiya. Akibaté, basa standar bakal ditampilake.

Kita ngomong babagan setelan telpon. Contone, ing emulator iOS sampeyan bisa ndeleng urutan basa.

Yen basa sing dipilih dudu basa sing disenengi, findBestAvailableLanguage bali tanpa ditetepake supaya basa standar ditampilake.

Bonus

react-native-localize nduweni API sing nyedhiyakake akses menyang akeh unsur basa. Sadurunge miwiti kerja, Iku worth mriksa metu dokumentasi.

temonan

Aplikasi bisa digawe multibasa tanpa masalah. React-native-localize minangka pilihan apik sing ngidini sampeyan nggedhekake basis pangguna app.

Kode sumber proyek kene.

Skillbox nyaranake:

Kursus praktis rong taun "Aku pengembang web PRO".

Kursus online "Pengembang C # saka awal".

Kursus praktis setahun "Pengembang PHP saka 0 nganti PRO".

Source: www.habr.com

Nulis aplikasi multibasa ing React Native