ரியாக்ட் நேட்டிவ் மொழியில் பன்மொழி விண்ணப்பத்தை எழுதுதல்

புதிய நாடுகள் மற்றும் பிராந்தியங்களை ஆராயும் சர்வதேச நிறுவனங்களுக்கு தயாரிப்பு உள்ளூர்மயமாக்கல் மிகவும் முக்கியமானது. இதேபோல், மொபைல் பயன்பாடுகளுக்கு உள்ளூர்மயமாக்கல் தேவை. ஒரு டெவலப்பர் சர்வதேச விரிவாக்கத்தைத் தொடங்கினால், மற்றொரு நாட்டிலிருந்து பயனர்கள் தங்கள் தாய்மொழியில் இடைமுகத்துடன் பணிபுரியும் வாய்ப்பை வழங்குவது முக்கியம். இந்த கட்டுரையில், தொகுப்பைப் பயன்படுத்தி ரியாக்ட் நேட்டிவ் பயன்பாட்டை உருவாக்குவோம் எதிர்வினை-சொந்த-உள்ளூர்.

Skillbox பரிந்துரைக்கிறது: கல்வி ஆன்லைன் படிப்பு "தொழில் ஜாவா டெவலப்பர்".
நாங்கள் நினைவூட்டுகிறோம்: "Habr" இன் அனைத்து வாசகர்களுக்கும் - "Habr" விளம்பரக் குறியீட்டைப் பயன்படுத்தி எந்த Skillbox படிப்பிலும் சேரும்போது 10 ரூபிள் தள்ளுபடி.

கருவிகள் மற்றும் திறன்கள்

இந்தக் கட்டுரையைப் புரிந்து கொள்ள, ரியாக்ட் நேட்டிவ் உடன் பணிபுரிவதில் உங்களுக்கு அடிப்படைத் திறன்கள் தேவை. வேலை செய்யும் இயந்திரத்தின் அமைப்புகளுடன் உங்களைப் பழக்கப்படுத்திக்கொள்ள, உங்களால் முடியும் அதிகாரப்பூர்வ வழிமுறைகளைப் பயன்படுத்தவும்.

மென்பொருள் கருவிகளின் இந்த பதிப்புகள் நமக்குத் தேவைப்படும்:

• முனை v10.15.0
• npm 6.4.1
• நூல் 1.16.0
• எதிர்வினை-சொந்தம் 0.59.9
• react-native-localize 1.1.3
• i18n-js 3.3.0

தொடங்குதல்

ஆங்கிலம், பிரஞ்சு மற்றும் அரபியை ஆதரிக்கும் பயன்பாட்டை நாங்கள் உருவாக்குவோம். முதலில் react-native-cli ஐப் பயன்படுத்தி ஒரு புதிய திட்டத்தை உருவாக்குகிறோம். இதைச் செய்ய, நீங்கள் இதை டெர்மினலில் தட்டச்சு செய்ய வேண்டும்:

$ react-native init பலமொழி
$ cd பல மொழி

தேவையான நூலகங்களைச் சேர்த்தல்

பின்வருவனவற்றைத் தட்டச்சு செய்வதன் மூலம் react-native-localize ஐ நிறுவுவது முதல் படி:
$ நூல் சேர் வினை-சொந்த-உள்ளூர்

நிறுவலின் போது சிக்கல்கள் ஏற்பட்டால், நிறுவல் கையேட்டைப் படிப்பது மதிப்பு.

react-native-localize library ஆனது டெவலப்பருக்கு பன்மொழி அம்சங்களுக்கான அணுகலை வழங்குகிறது. ஆனால் அவளுக்கு இன்னும் ஒரு நூலகம் தேவை - i18n.

இந்த கட்டுரை அதன் பயன்பாட்டை விவரிக்கிறது I18n.js ஜாவாஸ்கிரிப்ட்டில் மொழிபெயர்ப்பை வழங்குவதற்காக.

$ நூல் 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;
};

சரி, இப்போது ஆப் வகுப்பின் ஒரு கூறுகளை உருவாக்குவோம்:

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() இல் சேர்க்க வேண்டும், இந்த உறுப்பு புதுப்பிப்புகளைக் கேட்கும் மற்றும் அவை நிகழும்போது HandandLocalizationChange() ஐ அழைக்கும்.

handleLocalizationChange() முறை setI18nConfig() மற்றும் forceUpdate()ஐ செயல்படுத்துகிறது. மாற்றங்கள் கவனிக்கப்படுவதற்கு, கூறு ரெண்டர் செய்யப்பட வேண்டும் என்பதால், Android சாதனங்களுக்கு இது அவசியம்.

பின்னர் நீங்கள் ComponentWillUnmount() முறையிலிருந்து கேட்பதை அகற்ற வேண்டும்.

இறுதியாக, translate() ஐப் பயன்படுத்தி, அதில் ஒரு முக்கிய அளவுருவைச் சேர்ப்பதன் மூலம் render() helloஐ வழங்குகிறது. இந்த படிகளுக்குப் பிறகு, பயன்பாடு எந்த மொழி தேவை என்பதை "புரிந்து" அதில் செய்திகளைக் காண்பிக்கும்.

விண்ணப்ப வெளியீடு

மொழிபெயர்ப்பு எவ்வாறு செயல்படுகிறது என்பதைச் சரிபார்க்க வேண்டிய நேரம் இது.

முதலில், தட்டச்சு செய்வதன் மூலம் சிமுலேட்டர் அல்லது எமுலேட்டரில் பயன்பாட்டைத் தொடங்குகிறோம்

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

இது இப்படி இருக்கும்:

இப்போது நீங்கள் பயன்பாட்டைத் தொடங்குவதன் மூலம் மொழியை பிரெஞ்சுக்கு மாற்ற முயற்சி செய்யலாம்.

நாங்கள் அரபு மொழியிலும் அதையே செய்கிறோம், எந்த வித்தியாசமும் இல்லை.

இதுவரை மிகவும் நல்ல.

ஆனால் பயன்பாட்டில் மொழிபெயர்ப்பு இல்லாத சீரற்ற மொழியைத் தேர்ந்தெடுத்தால் என்ன நடக்கும்?

FindBestLanguage இன் பணி, கிடைக்கக்கூடிய அனைத்து மொழிகளிலிருந்தும் உகந்த மொழிபெயர்ப்பை வழங்குவதாக மாறிவிடும். இதன் விளைவாக, இயல்பு மொழி காட்டப்படும்.

நாங்கள் தொலைபேசி அமைப்புகளைப் பற்றி பேசுகிறோம். எடுத்துக்காட்டாக, iOS முன்மாதிரியில் நீங்கள் மொழிகளின் வரிசையைக் காணலாம்.

தேர்ந்தெடுக்கப்பட்ட மொழி விருப்பமான மொழியாக இல்லாவிட்டால், findBestAvailableLanguage வரையறுக்கப்படாமல் திரும்பும், இதனால் இயல்பு மொழி காண்பிக்கப்படும்.

போனஸ்

react-native-localize ஆனது அதிக எண்ணிக்கையிலான மொழி உறுப்புகளுக்கான அணுகலை வழங்கும் API ஐக் கொண்டுள்ளது. வேலையைத் தொடங்கும் முன், ஆவணங்களைச் சரிபார்ப்பது மதிப்பு.

கண்டுபிடிப்புகள்

பயன்பாடு எந்த பிரச்சனையும் இல்லாமல் பன்மொழி செய்ய முடியும். React-native-localize என்பது உங்கள் பயன்பாட்டின் பயனர் தளத்தை விரிவாக்க அனுமதிக்கும் ஒரு சிறந்த வழி.

திட்ட மூல குறியீடு இங்கே உள்ளது.

Skillbox பரிந்துரைக்கிறது:

• இரண்டு வருட நடைமுறை படிப்பு "நான் ஒரு புரோ வெப் டெவலப்பர்".
• ஆன்லைன் படிப்பு "புதிதாக C# டெவலப்பர்".
• நடைமுறை ஆண்டு படிப்பு "0 முதல் PRO வரையிலான PHP டெவலப்பர்".

ஆதாரம்: www.habr.com