🥇Γράφουμε μια πολύγλωσση εφαρμογή στο React Native

Η τοπική προσαρμογή των προϊόντων είναι πολύ σημαντική για τις διεθνείς εταιρείες που αναπτύσσουν νέες χώρες και περιοχές. Ομοίως, απαιτείται τοπική προσαρμογή για εφαρμογές για κινητές συσκευές. Εάν ένας προγραμματιστής ξεκινήσει τη διεθνή επέκταση, είναι σημαντικό να δοθεί η ευκαιρία σε χρήστες από άλλη χώρα να εργαστούν με τη διεπαφή στη μητρική τους γλώσσα. Σε αυτό το άρθρο, θα δημιουργήσουμε μια εφαρμογή React Native χρησιμοποιώντας το πακέτο αντιδρώ-εγγενής-εντοπίζω.

Το Skillbox προτείνει: Εκπαιδευτικό διαδικτυακό μάθημα "Επάγγελμα προγραμματιστή Java".
Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".

Εργαλεία και δεξιότητες

Η κατανόηση αυτού του άρθρου απαιτεί βασικές δεξιότητες React Native. Για να εξοικειωθείτε με τις ρυθμίσεις της μηχανής εργασίας, μπορείτε χρησιμοποιήστε επίσημες οδηγίες.

Χρειαζόμαστε αυτές τις εκδόσεις εργαλείων λογισμικού:

Κόμβος v10.15.0
npm 6.4.1
νήματα 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Ξεκινώντας

Θα δημιουργήσουμε μια εφαρμογή που θα υποστηρίζει Αγγλικά, Γαλλικά και Αραβικά. Πρώτα δημιουργούμε ένα νέο έργο χρησιμοποιώντας το react-native-cli. Για να το κάνετε αυτό, στο τερματικό πρέπει να πληκτρολογήσετε αυτό:

$ react-native init multiLanguage
$ cd πολυγλωσσικό

Προσθήκη των απαιτούμενων βιβλιοθηκών

Το πρώτο βήμα είναι να εγκαταστήσετε το react-native-localize πληκτρολογώντας τα εξής:
$ νήμα προσθέστε react-native-localize

Εάν αντιμετωπίσετε προβλήματα κατά τη διαδικασία εγκατάστασης, ελέγξτε το εγχειρίδιο εγκατάστασης.

Η βιβλιοθήκη react-native-localize δίνει στον προγραμματιστή πρόσβαση σε πολύγλωσσες λειτουργίες. Αλλά χρειάζεται μια άλλη βιβλιοθήκη - i18n.

Το άρθρο περιγράφει τη χρήση I18n.js προκειμένου να παρέχεται μετάφραση σε JavaScript.

$ νήμα προσθέστε i18n-js

Λοιπόν, επειδή το i18n-js δεν παρέχει προσωρινή αποθήκευση ή απομνημόνευση, προτείνω να χρησιμοποιήσετε το lodash.memoize για αυτό:

$ νήμα προσθέστε lodash.memoize

Εργασία με μεταφράσεις

Για να λειτουργήσει η εφαρμογή με άλλες γλώσσες, πρέπει πρώτα να δημιουργήσετε έναν κατάλογο μεταφράσεων μέσα στο src και μετά τρία αρχεία JSON για κάθε μία από τις γλώσσες.

1. en.json για τα αγγλικά.

2. fr.json για γαλλικά?

3. ar.json για τα αραβικά.

Αυτά τα αρχεία περιέχουν αντικείμενα JSON με κλειδιά και τιμές. Το κλειδί θα είναι το ίδιο για κάθε γλώσσα. Χρησιμοποιείται από την εφαρμογή για την εμφάνιση πληροφοριών κειμένου.

Τιμή (τιμή) είναι το κείμενο που πρέπει να εμφανίζεται στον χρήστη.

Αγγλικά:

{ "hello": "Hello World!"}

Французский

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

Арабский

{ "γεια": "أهلاً بالعالم"}

Με τον ίδιο τρόπο μπορούν να προστεθούν και άλλες γλώσσες.

Κύριος κωδικός

Σε αυτό το σημείο, πρέπει να ανοίξετε το αρχείο App.js και να προσθέσετε εισαγωγές σε αυτό:

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

Μετά από αυτό, προστίθενται βοηθητικές συναρτήσεις και σταθερές, οι οποίες θα είναι χρήσιμες αργότερα.

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

Λοιπόν, τώρα ας δημιουργήσουμε ένα στοιχείο της κατηγορίας 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
  }
});

Το πρώτο στοιχείο, setI18nConfig(), ορίζει την αρχική διαμόρφωση.

Στη συνέχεια, πρέπει να προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων στο componentDidMount(), αυτό το στοιχείο θα ακούσει για ενημερώσεις και θα καλέσει τη handleLocalizationChange() όταν αυτές πραγματοποιηθούν.

Η μέθοδος handleLocalizationChange() καλεί τη setI18nConfig() και την forceUpdate(). Αυτό είναι απαραίτητο για συσκευές Android, καθώς το στοιχείο πρέπει να αποδοθεί για να γίνουν ορατές οι αλλαγές.

Στη συνέχεια, πρέπει να αφαιρέσουμε τον ακροατή από τη μέθοδο componentWillUnmount().

Τέλος, το hello επιστρέφεται στο render() χρησιμοποιώντας το translate() και προσθέτοντας μια βασική παράμετρο σε αυτό. Μετά από αυτά τα βήματα, η εφαρμογή θα μπορεί να «κατανοήσει» ποια γλώσσα χρειάζεται και να εμφανίζει μηνύματα σε αυτήν.

Έναρξη εφαρμογής

Τώρα είναι η ώρα να ελέγξετε πώς λειτουργεί η μετάφραση.

Πρώτα τρέχουμε την εφαρμογή στον προσομοιωτή ή στον εξομοιωτή πληκτρολογώντας

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

Θα μοιάζει κάπως έτσι:

Τώρα μπορείτε να προσπαθήσετε να αλλάξετε τη γλώσσα σε γαλλικά εκκινώντας την εφαρμογή.

Το ίδιο κάνουμε και με την αραβική γλώσσα, δεν υπάρχει διαφορά.

Μέχρι στιγμής όλα πάνε καλά.

Τι συμβαίνει όμως αν επιλέξετε μια τυχαία γλώσσα που δεν έχει μετάφραση στην εφαρμογή;

Αποδεικνύεται ότι το καθήκον του findBestLanguage είναι να παρέχει την καλύτερη δυνατή μετάφραση μεταξύ όλων των διαθέσιμων. Ως αποτέλεσμα, θα εμφανιστεί η γλώσσα που ορίστηκε από προεπιλογή.

Πρόκειται για ρυθμίσεις τηλεφώνου. Έτσι, για παράδειγμα, στον εξομοιωτή iOS, μπορείτε να δείτε τη σειρά των γλωσσών.

Εάν η επιλεγμένη γλώσσα δεν είναι η προτιμώμενη γλώσσα, το findBestAvailableLanguage επιστρέφει απροσδιόριστο ώστε να εμφανίζεται η προεπιλεγμένη γλώσσα.

Δώρο

Το react-native-localize έχει ένα API που παρέχει πρόσβαση σε μεγάλο αριθμό στοιχείων γλώσσας. Πριν ξεκινήσετε την εργασία, αξίζει να διαβάσετε την τεκμηρίωση.

Ευρήματα

Η εφαρμογή μπορεί να γίνει πολύγλωσση χωρίς κανένα πρόβλημα. Το React-native-localize είναι μια εξαιρετική επιλογή που σας επιτρέπει να επεκτείνετε το εύρος των χρηστών της εφαρμογής σας.

Πηγαίος κώδικας έργου που βρίσκεται εδώ.

Το Skillbox προτείνει:

Πρακτικό μάθημα δύο ετών "Είμαι προγραμματιστής ιστού PRO".

Διαδικτυακό μάθημα "Προγραμματιστής C# από την αρχή".

Πρακτικό μάθημα έτους "Προγραμματιστής PHP από 0 έως PRO".

Πηγή: www.habr.com

Γράφουμε μια πολύγλωσση εφαρμογή στο React Native