🥇Kami sedang menulis aplikasi berbilang bahasa dalam React Native

Penyetempatan produk sangat penting untuk syarikat antarabangsa yang meneroka negara dan wilayah baharu. Begitu juga, penyetempatan diperlukan untuk aplikasi mudah alih. Jika pembangun memulakan pengembangan antarabangsa, adalah penting untuk memberi pengguna dari negara lain peluang untuk bekerja dengan antara muka dalam bahasa ibunda mereka. Dalam artikel ini, kami akan mencipta aplikasi React Native menggunakan pakej tersebut bertindak balas-asli-menyetempatkan.

Skillbox mengesyorkan: Kursus dalam talian pendidikan "Pemaju Java Profesion".
Kami mengingatkan: untuk semua pembaca "Habr" - diskaun sebanyak 10 rubel apabila mendaftar dalam mana-mana kursus Skillbox menggunakan kod promosi "Habr".

Alat dan kemahiran

Untuk memahami artikel ini, anda memerlukan kemahiran asas dalam bekerja dengan React Native. Untuk membiasakan diri dengan tetapan mesin kerja, anda boleh gunakan arahan rasmi.

Kami memerlukan versi alat perisian ini:

Nod v10.15.0
npm 6.4.1
benang 1.16.0
react-asli 0.59.9
bertindak balas-asli-setempat 1.1.3
i18n-js 3.3.0

Bermula

Kami akan membuat aplikasi yang akan menyokong bahasa Inggeris, Perancis dan Arab. Mula-mula kita buat projek baharu menggunakan react-native-cli. Untuk melakukan ini, anda perlu menaip ini di terminal:

$ react-native init multiLanguage
$ cd berbilang Bahasa

Menambah perpustakaan yang diperlukan

Langkah pertama ialah memasang react-native-localize dengan menaip yang berikut:
$ benang tambah react-native-localize

Jika masalah berlaku semasa proses pemasangan, Ia bernilai membaca manual pemasangan.

Pustaka react-native-localize memberikan pembangun akses kepada ciri berbilang bahasa. Tetapi dia memerlukan satu lagi perpustakaan - i18n.

Artikel ini menerangkan penggunaan I18n.js untuk menyediakan terjemahan ke dalam JavaScript.

$ benang tambah i18n-js

Oleh kerana i18n-js tidak menyediakan caching atau memoization, saya cadangkan menggunakan lodash.memoize untuk ini:

$ benang tambah lodash.memoize

Bekerja dengan terjemahan

Agar aplikasi dapat berfungsi dengan bahasa lain, anda perlu membuat direktori terjemahan di dalam src dahulu, kemudian tiga fail JSON untuk setiap bahasa.

1. en.json untuk bahasa Inggeris;

2. fr.json untuk bahasa Perancis;

3. ar.json untuk bahasa Arab.

Fail ini mengandungi objek JSON dengan kunci dan nilai. Kuncinya adalah sama untuk setiap bahasa. Ia digunakan oleh aplikasi untuk memaparkan maklumat teks.

Nilai ialah teks yang perlu ditunjukkan kepada pengguna.

Bahasa Inggeris:

{"hello": "Hello World!"}

Французский

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

Арабский

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

Anda boleh menambah bahasa lain dengan cara yang sama.

Kod utama

Pada ketika ini, anda perlu membuka fail App.js dan menambah import padanya:

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

Selepas ini, fungsi tambahan dan pemalar ditambah yang akan berguna kemudian.

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(), menetapkan konfigurasi awal.

Kemudian anda perlu menambah pendengar acara pada componentDidMount(), elemen ini akan mendengar kemas kini dan memanggil handleLocalizationChange() apabila ia berlaku.

Kaedah handleLocalizationChange() mengaktifkan setI18nConfig() dan forceUpdate(). Ini adalah perlu untuk peranti Android kerana komponen mesti dipaparkan agar perubahan menjadi ketara.

Kemudian anda perlu mengalih keluar pendengaran daripada kaedah componentWillUnmount().

Akhir sekali, render() mengembalikan helo dengan menggunakan translate() dan menambahkan parameter utama padanya. Selepas langkah ini, aplikasi akan dapat "memahami" bahasa yang diperlukan dan memaparkan mesej di dalamnya.

Pelancaran aplikasi

Sekarang adalah masa untuk menyemak cara terjemahan berfungsi.

Mula-mula, kami melancarkan aplikasi dalam simulator atau emulator dengan menaip

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

Ia akan kelihatan seperti ini:

Kini anda boleh cuba menukar bahasa kepada bahasa Perancis dengan melancarkan aplikasi.

Kita buat perkara yang sama dengan bahasa Arab, tiada bezanya.

Setakat ini baik.

Tetapi apa yang berlaku jika anda memilih bahasa rawak yang tiada terjemahan dalam aplikasi?

Ternyata tugas findBestLanguage adalah untuk menyediakan terjemahan optimum daripada semua yang tersedia. Akibatnya, bahasa lalai akan dipaparkan.

Kami bercakap tentang tetapan telefon. Sebagai contoh, dalam emulator iOS anda boleh melihat susunan bahasa.

Jika bahasa yang dipilih bukan bahasa pilihan, findBestAvailableLanguage kembali tidak ditentukan supaya bahasa lalai ditunjukkan.

Bonus

react-native-localize mempunyai API yang menyediakan akses kepada sejumlah besar elemen bahasa. Sebelum anda mula bekerja, Perlu menyemak dokumentasi.

Penemuan

Aplikasi ini boleh dibuat berbilang bahasa tanpa sebarang masalah. React-native-localize ialah pilihan hebat yang membolehkan anda mengembangkan pangkalan pengguna apl anda.

Kod sumber projek terletak di sini.

Skillbox mengesyorkan:

Kursus praktikal dua tahun "Saya seorang pembangun web PRO".

Kursus dalam talian "Pembangun C# dari awal".

Kursus tahun praktikal "Pembangun PHP dari 0 hingga PRO".

Sumber: www.habr.com

Menulis aplikasi berbilang bahasa dalam React Native