ការសរសេរកម្មវិធីពហុភាសានៅក្នុង React Native

ការធ្វើមូលដ្ឋានីយកម្មផលិតផលមានសារៈសំខាន់ណាស់សម្រាប់ក្រុមហ៊ុនអន្តរជាតិដែលស្វែងរកប្រទេស និងតំបន់ថ្មីៗ។ ដូចគ្នានេះដែរ ការធ្វើមូលដ្ឋានីយកម្មគឺត្រូវការសម្រាប់កម្មវិធីទូរស័ព្ទ។ ប្រសិនបើអ្នកអភិវឌ្ឍន៍ចាប់ផ្តើមពង្រីកជាអន្តរជាតិ វាមានសារៈសំខាន់ណាស់ក្នុងការផ្តល់ឱ្យអ្នកប្រើប្រាស់ពីប្រទេសមួយផ្សេងទៀតនូវឱកាសដើម្បីធ្វើការជាមួយចំណុចប្រទាក់ជាភាសាកំណើតរបស់ពួកគេ។ នៅក្នុងអត្ថបទនេះ យើងនឹងបង្កើតកម្មវិធី React Native ដោយប្រើកញ្ចប់ react-native-localize.

Skillbox ណែនាំ៖ វគ្គសិក្សាតាមអ៊ីនធឺណិត "Profession Java Developer".
យើងរំលឹក៖ សម្រាប់អ្នកអានទាំងអស់នៃ "Habr" - ការបញ្ចុះតម្លៃ 10 rubles នៅពេលចុះឈ្មោះក្នុងវគ្គសិក្សា Skillbox ណាមួយដោយប្រើលេខកូដផ្សព្វផ្សាយ "Habr" ។

ឧបករណ៍និងជំនាញ

ដើម្បីយល់ពីអត្ថបទនេះ អ្នកត្រូវការជំនាញជាមូលដ្ឋានក្នុងការធ្វើការជាមួយ React Native។ ដើម្បីស្គាល់ខ្លួនអ្នកជាមួយនឹងការកំណត់របស់ម៉ាស៊ីនដែលកំពុងធ្វើការ អ្នកអាចធ្វើបាន ប្រើការណែនាំផ្លូវការ.

យើងនឹងត្រូវការកំណែឧបករណ៍កម្មវិធីទាំងនេះ៖

• ថ្នាំង v10.15.0
• npm ៥.០.០
• អំបោះ 1.16.0
• ប្រតិកម្ម-ដើម 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 ដោយវាយដូចខាងក្រោម៖
$ yarn បន្ថែម react-native-localize

ប្រសិនបើមានបញ្ហាកើតឡើងក្នុងអំឡុងពេលដំណើរការដំឡើង។ វាមានតម្លៃអានសៀវភៅណែនាំការដំឡើង.

បណ្ណាល័យ react-native-localize ផ្តល់ឱ្យអ្នកអភិវឌ្ឍន៍នូវសិទ្ធិប្រើប្រាស់មុខងារពហុភាសា។ ប៉ុន្តែនាងត្រូវការបណ្ណាល័យមួយបន្ថែមទៀត - i18n ។

អត្ថបទនេះពិពណ៌នាអំពីការប្រើប្រាស់ I18n.js ដើម្បីផ្តល់ការបកប្រែទៅជា JavaScript ។

$ yarn បន្ថែម i18n-js

ជាការប្រសើរណាស់, ចាប់តាំងពី i18n-js មិនផ្តល់ឃ្លាំងសម្ងាត់ឬការចងចាំខ្ញុំស្នើឱ្យប្រើ lodash.memoize សម្រាប់ការនេះ:

$ yarn បន្ថែម lodash.memoize

ធ្វើការជាមួយការបកប្រែ

ដើម្បីឱ្យកម្មវិធីអាចធ្វើការជាមួយភាសាផ្សេងទៀត ដំបូងអ្នកត្រូវបង្កើតថតការបកប្រែនៅក្នុង src បន្ទាប់មកឯកសារ JSON ចំនួនបីសម្រាប់ភាសានីមួយៗ។

1. en.json សម្រាប់ភាសាអង់គ្លេស;

2. fr.json សម្រាប់ភាសាបារាំង;

3. ar.json សម្រាប់ភាសាអារ៉ាប់។

ឯកសារទាំងនេះមានវត្ថុ JSON ដែលមានកូនសោ និងតម្លៃ។ គន្លឹះនឹងដូចគ្នាសម្រាប់ភាសានីមួយៗ។ វាត្រូវបានប្រើដោយកម្មវិធីដើម្បីបង្ហាញព័ត៌មានអត្ថបទ។

តម្លៃគឺជាអត្ថបទដែលត្រូវការបង្ហាញដល់អ្នកប្រើប្រាស់។

អង់គ្លេស៖

{"hello": "សួស្តីពិភពលោក!"}

ភាសាបារាំង

{"hello": "ជំរាបសួរ!

Арабский

{ "សួស្តី": "أهلاً بالعالم"}

អ្នកអាចបន្ថែមភាសាផ្សេងទៀតតាមរបៀបដូចគ្នា។

កូដចម្បង

នៅចំណុចនេះ អ្នកត្រូវបើកឯកសារ 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;
};

ឥឡូវនេះ ចូរយើងបង្កើតធាតុផ្សំនៃថ្នាក់កម្មវិធី៖

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() ត្រឡប់ hello ដោយប្រើ translate() ហើយបន្ថែម key parameter ទៅវា។ បន្ទាប់ពីជំហានទាំងនេះ កម្មវិធីនឹងអាច "យល់" ថាតើត្រូវការភាសាអ្វី និងបង្ហាញសារនៅក្នុងវា។

ការចាប់ផ្តើមកម្មវិធី

ឥឡូវនេះដល់ពេលដែលត្រូវពិនិត្យមើលពីរបៀបដែលការបកប្រែដំណើរការ។

ដំបូងយើងបើកដំណើរការកម្មវិធីនៅក្នុងកម្មវិធីក្លែងធ្វើ ឬកម្មវិធីត្រាប់តាមដោយវាយបញ្ចូល

$ 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