🥇เรากำลังเขียนแอปพลิเคชันหลายภาษาใน React Native

การแปลผลิตภัณฑ์ให้เหมาะกับท้องถิ่นเป็นสิ่งสำคัญมากสำหรับบริษัทต่างชาติที่กำลังสำรวจประเทศและภูมิภาคใหม่ๆ ในทำนองเดียวกัน จำเป็นต้องมีการแปลเป็นภาษาท้องถิ่นสำหรับแอปพลิเคชันบนมือถือ หากนักพัฒนาเริ่มขยายธุรกิจไปยังต่างประเทศ สิ่งสำคัญคือต้องให้โอกาสผู้ใช้จากประเทศอื่นในการทำงานกับอินเทอร์เฟซในภาษาของตนเอง ในบทความนี้ เราจะสร้างแอปพลิเคชัน React Native โดยใช้แพ็คเกจ ตอบสนองพื้นเมืองแปล.

Skillbox แนะนำ: หลักสูตรออนไลน์เพื่อการศึกษา "นักพัฒนาจาวามืออาชีพ".
เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

เครื่องมือและทักษะ

เพื่อให้เข้าใจบทความนี้ คุณต้องมีทักษะพื้นฐานในการทำงานกับ React Native เพื่อทำความคุ้นเคยกับการตั้งค่าของเครื่องทำงานคุณสามารถทำได้ ใช้คำแนะนำอย่างเป็นทางการ.

เราต้องการเครื่องมือซอฟต์แวร์เวอร์ชันเหล่านี้:

โหนด v10.15.0
เวลา 6.4.1 น
เส้นด้าย 1.16.0
ปฏิกิริยาพื้นเมือง 0.59.9
ตอบสนองพื้นเมืองแปล 1.1.3
i18n-js 3.3.0

เริ่มต้นใช้งาน

เราจะสร้างแอปพลิเคชันที่จะรองรับภาษาอังกฤษ ฝรั่งเศส และอารบิก ก่อนอื่นเราสร้างโปรเจ็กต์ใหม่โดยใช้ react-native-cli ในการดำเนินการนี้ คุณต้องพิมพ์สิ่งนี้ลงในเทอร์มินัล:

$ react-native เริ่มต้นหลายภาษา
$ 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 พร้อมด้วยคีย์และค่า คีย์จะเหมือนกันในแต่ละภาษา แอปพลิเคชันใช้เพื่อแสดงข้อมูลข้อความ

ค่าคือข้อความที่ต้องแสดงให้ผู้ใช้เห็น

ภาษาอังกฤษ:

{"สวัสดี": "สวัสดีชาวโลก!"}

Французский

{"สวัสดี": "สวัสดี เลอ มงด์!"}

Арабский

{ "สวัสดี": "اهلا بالعالم"}

คุณสามารถเพิ่มภาษาอื่นได้ในลักษณะเดียวกัน

รหัสหลัก

ณ จุดนี้ คุณต้องเปิดไฟล์ 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()

สุดท้าย 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".

ที่มา: will.com

การเขียนแอปพลิเคชันหลายภาษาใน React Native