🥇React Native'de çok dilli bir uygulama yazıyoruz

Ürün yerelleştirmesi, yeni ülke ve bölgeleri keşfeden uluslararası şirketler için çok önemlidir. Benzer şekilde mobil uygulamalar için de yerelleştirmeye ihtiyaç duyulmaktadır. Bir geliştirici uluslararası genişlemeye başlarsa, başka bir ülkeden kullanıcılara arayüzle kendi ana dillerinde çalışma fırsatı vermek önemlidir. Bu yazımızda paketi kullanarak React Native uygulaması oluşturacağız. tepki-yerel-yerelleştirme.

Skillbox şunları önerir: Eğitici çevrimiçi kurs "Meslek Java geliştiricisi".
Hatırlatıyoruz: tüm "Habr" okuyucuları için - "Habr" promosyon kodunu kullanarak herhangi bir Skillbox kursuna kayıt olurken 10 ruble indirim.

Araçlar ve beceriler

Bu makaleyi anlamak için React Native ile çalışırken temel becerilere ihtiyacınız var. Çalışan makinenin ayarlarına alışmak için şunları yapabilirsiniz: resmi talimatları kullanın.

Yazılım araçlarının şu sürümlerine ihtiyacımız olacak:

Düğüm v10.15.0
Npm 6.4.1
iplik 1.16.0
tepki-yerel 0.59.9
tepki-yerel-yerelleştirme 1.1.3
i18n-js 3.3.0

Başlarken

İngilizce, Fransızca ve Arapçayı destekleyecek bir uygulama oluşturacağız. Öncelikle react-native-cli kullanarak yeni bir proje oluşturuyoruz. Bunu yapmak için terminale şunu yazmanız gerekir:

$ react-native init çoklu dil
$ cd çoklu dil

Gerekli kütüphanelerin eklenmesi

İlk adım, aşağıdakileri yazarak react-native-localize'ı kurmaktır:
$ iplik ekle tepki-yerel-yerelleştirme

Kurulum işlemi sırasında sorunlar ortaya çıkarsa, Kurulum kılavuzunu okumaya değer.

react-native-localize kütüphanesi geliştiriciye çok dilli özelliklere erişim sağlar. Ama bir kütüphaneye daha ihtiyacı var - i18n.

Bu makalede kullanımı açıklanmaktadır I18n.js JavaScript'e çeviri sağlamak için.

$ iplik ekle i18n-js

i18n-js önbellekleme veya not alma sağlamadığından bunun için lodash.memoize kullanmanızı öneririm:

$ iplik lodash.memoize ekle

Çevirilerle çalışma

Uygulamanın diğer dillerle çalışabilmesi için öncelikle src içerisinde bir çeviriler dizini, ardından her dil için üç JSON dosyası oluşturmanız gerekiyor.

1. İngilizce için en.json;

2. Fransızca için fr.json;

3. Arapça için ar.json.

Bu dosyalar, anahtarları ve değerleri içeren JSON nesnelerini içerir. Anahtar her dil için aynı olacaktır. Uygulama tarafından metin bilgilerini görüntülemek için kullanılır.

Değer kullanıcıya gösterilmesi gereken metindir.

İngilizce:

{"merhaba": "Merhaba Dünya!"}

Французский

{"merhaba": "Merhaba Monde!"}

Арабский

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

Aynı şekilde diğer dilleri de ekleyebilirsiniz.

Ana kod

Bu noktada App.js dosyasını açmanız ve ona içe aktarmaları eklemeniz gerekir:

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

Bundan sonra daha sonra işinize yarayacak yardımcı fonksiyonlar ve sabitler eklenir.

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

Şimdi App sınıfının bir bileşenini oluşturalım:

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

İlk öğe olan setI18nConfig(), başlangıç yapılandırmasını ayarlar.

Daha sonra, bileşenDidMount()'a bir olay dinleyicisi eklemeniz gerekir; bu öğe, güncellemeleri dinleyecek ve meydana geldiğinde HandleLocalizationChange()'ı çağıracaktır.

handLocalizationChange() yöntemi setI18nConfig() veforceUpdate()'i etkinleştirir. Değişikliklerin fark edilebilmesi için bileşenin oluşturulması gerektiğinden bu, Android cihazlar için gereklidir.

Daha sonra dinlemeyi bileşenWillUnmount() yönteminden kaldırmanız gerekir.

Son olarak render(), Translate() işlevini kullanarak ve ona bir anahtar parametre ekleyerek merhaba değerini döndürür. Bu adımlardan sonra uygulama hangi dilin gerekli olduğunu “anlayabilecek” ve mesajları bu dilde görüntüleyebilecektir.

Uygulama başlatma

Şimdi çevirinin nasıl çalıştığını kontrol etmenin zamanı geldi.

Öncelikle uygulamayı simülatörde veya emülatörde yazarak başlatıyoruz.

$ tepki-yerel çalışma-ios
$ tepki-yerel çalıştırma-android

Bunun gibi bir şey görünecek:

Artık uygulamayı başlatarak dili Fransızca olarak değiştirmeyi deneyebilirsiniz.

Aynı şeyi Arapça için de yapıyoruz, hiçbir fark yok.

Şimdiye kadar, çok iyi.

Peki uygulamada çevirisi bulunmayan rastgele bir dil seçerseniz ne olur?

FindBestLanguage'ın görevinin mevcut tüm çeviriler arasında en uygun çeviriyi sağlamak olduğu ortaya çıktı. Sonuç olarak, varsayılan dil görüntülenecektir.

Telefon ayarlarından bahsediyoruz. Örneğin iOS öykünücüsünde dillerin sırasını görebilirsiniz.

Seçilen dil tercih edilen dil değilse findBestAvailableLanguage, varsayılan dilin gösterilmesi için tanımsız değerini döndürür.

Bonus

react-native-localize, çok sayıda dil öğesine erişim sağlayan bir API'ye sahiptir. Çalışmaya başlamadan önce, Belgeleri incelemeye değer.

Bulgular

Uygulama çok dilli olarak sorunsuzca yapılabilmektedir. React-native-localize, uygulamanızın kullanıcı tabanını genişletmenize olanak tanıyan harika bir seçenektir.

Proje kaynak kodu burada bulunan.

Skillbox şunları önerir:

İki yıllık uygulamalı kurs "Ben bir PRO web geliştiricisiyim".

çevrimiçi kurs "Sıfırdan C# geliştiricisi".

Uygulamalı yıl kursu "0'dan PRO'ya PHP geliştiricisi".

Kaynak: habr.com

React Native'de çok dilli bir uygulama yazma