🥇Kami sedang menulis aplikasi multibahasa di React Native

Lokalisasi produk sangat penting bagi perusahaan internasional yang menjelajahi negara dan wilayah baru. Demikian pula, lokalisasi diperlukan untuk aplikasi seluler. Jika pengembang memulai ekspansi internasional, penting untuk memberikan kesempatan kepada pengguna dari negara lain untuk bekerja dengan antarmuka dalam bahasa ibu mereka. Pada artikel ini, kita akan membuat aplikasi React Native menggunakan paket tersebut reaksi-asli-lokalisasi.

Skillbox merekomendasikan: Kursus online pendidikan "Profesi Pengembang Java".
Kami mengingatkan: untuk semua pembaca "Habr" - diskon 10 rubel saat mendaftar di kursus Skillbox apa pun menggunakan kode promosi "Habr".

Alat dan keterampilan

Untuk memahami artikel ini, Anda memerlukan keterampilan dasar dalam bekerja dengan React Native. Anda dapat membiasakan diri dengan pengaturan mesin yang berfungsi gunakan instruksi resmi.

Kami memerlukan versi perangkat lunak berikut:

Simpul v10.15.0
npm 6.4.1
benang 1.16.0
reaksi-asli 0.59.9
reaksi-asli-lokalisasi 1.1.3
i18n-js 3.3.0

Memulai

Kami akan membuat aplikasi yang mendukung bahasa Inggris, Prancis, dan Arab. Pertama kita membuat proyek baru menggunakan react-native-cli. Untuk melakukan ini, Anda perlu mengetikkan ini di terminal:

$ reaksi-asli init multiBahasa
$ cd multiBahasa

Menambahkan perpustakaan yang diperlukan

Langkah pertama adalah menginstal react-native-localize dengan mengetikkan perintah berikut:
$ benang tambahkan reaksi-asli-lokalisasi

Jika terjadi masalah pada saat proses instalasi, Sebaiknya baca manual instalasi.

Pustaka react-native-localize memberi pengembang akses ke fitur multibahasa. Tapi dia membutuhkan perpustakaan lain - i18n.

Artikel ini menjelaskan penggunaannya I18n.js untuk menyediakan terjemahan ke dalam JavaScript.

$ benang tambahkan i18n-js

Karena i18n-js tidak menyediakan caching atau memoisasi, saya sarankan menggunakan lodash.memoize untuk ini:

$ benang tambahkan lodash.memoize

Bekerja dengan terjemahan

Agar aplikasi dapat bekerja dengan bahasa lain, Anda harus terlebih dahulu membuat direktori terjemahan di dalam src, lalu tiga file JSON untuk setiap bahasa.

1. en.json untuk bahasa Inggris;

2. fr.json untuk bahasa Prancis;

3. ar.json untuk bahasa Arab.

File-file ini berisi objek JSON dengan kunci dan nilai. Kuncinya akan sama untuk setiap bahasa. Ini digunakan oleh aplikasi untuk menampilkan informasi teks.

Nilai adalah teks yang perlu ditampilkan kepada pengguna.

Bahasa Inggris:

{"halo": "Halo Dunia!"}

Французский

{"halo": "Salam kepada Monde!"}

Арабский

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

Anda dapat menambahkan bahasa lain dengan cara yang sama.

Kode utama

Pada titik ini, Anda perlu membuka file App.js dan menambahkan impor ke dalamnya:

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

Setelah itu, fungsi tambahan dan konstanta ditambahkan yang akan berguna nantinya.

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

Nah, sekarang mari kita buat 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
  }
});

Elemen pertama, setI18nConfig(), menyetel konfigurasi awal.

Kemudian Anda perlu menambahkan pendengar acara ke komponenDidMount(), elemen ini akan mendengarkan pembaruan dan memanggil handleLocalizationChange() ketika itu terjadi.

Metode handleLocalizationChange() mengaktifkan setI18nConfig() dan forceUpdate(). Hal ini diperlukan untuk perangkat Android karena komponen harus dirender agar perubahan dapat terlihat.

Maka Anda perlu menghapus proses mendengarkan dari metode componentWillUnmount().

Terakhir, render() mengembalikan hello dengan menggunakan Translate() dan menambahkan parameter kunci ke dalamnya. Setelah langkah-langkah tersebut, aplikasi akan dapat “memahami” bahasa apa yang dibutuhkan dan menampilkan pesan di dalamnya.

Peluncuran aplikasi

Sekaranglah waktunya untuk memeriksa cara kerja terjemahannya.

Pertama kita luncurkan aplikasinya di simulator atau emulator dengan mengetik

$ reaksi-asli run-ios
$ reaksi-asli jalankan-android

Ini akan terlihat seperti ini:

Sekarang Anda dapat mencoba mengubah bahasa ke Perancis dengan meluncurkan aplikasi.

Kami melakukan hal yang sama dengan bahasa Arab, tidak ada perbedaan.

Sejauh ini bagus.

Namun apa jadinya jika Anda memilih bahasa acak yang tidak ada terjemahannya di aplikasi?

Ternyata tugas findBestLanguage adalah memberikan terjemahan yang optimal dari semua terjemahan yang tersedia. Hasilnya, bahasa default akan ditampilkan.

Kita berbicara tentang pengaturan telepon. Misalnya, di emulator iOS Anda dapat melihat urutan bahasa.

Jika bahasa yang dipilih bukan bahasa pilihan, findBestAvailableLanguage mengembalikan tidak terdefinisi sehingga bahasa default ditampilkan.

Bonus

react-native-localize memiliki API yang menyediakan akses ke sejumlah besar elemen bahasa. Sebelum Anda mulai bekerja, Ada baiknya memeriksa dokumentasinya.

Temuan

Aplikasi dapat dibuat multibahasa tanpa masalah. React-native-localize adalah opsi bagus yang memungkinkan Anda memperluas basis pengguna aplikasi Anda.

Kode sumber proyek di sini.

Skillbox merekomendasikan:

Kursus praktik dua tahun "Saya seorang pengembang web PRO".

Kursus online "Pengembang C# dari awal".

Kursus tahun praktis "Pengembang PHP dari 0 hingga PRO".

Sumber: www.habr.com

Menulis aplikasi multibahasa di React Native