ರಿಯಾಕ್ಟ್ ನೇಟಿವ್‌ನಲ್ಲಿ ಬಹುಭಾಷಾ ಅಪ್ಲಿಕೇಶನ್ ಬರೆಯುವುದು

ಹೊಸ ದೇಶಗಳು ಮತ್ತು ಪ್ರದೇಶಗಳನ್ನು ಅನ್ವೇಷಿಸುವ ಅಂತರರಾಷ್ಟ್ರೀಯ ಕಂಪನಿಗಳಿಗೆ ಉತ್ಪನ್ನ ಸ್ಥಳೀಕರಣವು ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. ಅಂತೆಯೇ, ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಸ್ಥಳೀಕರಣದ ಅಗತ್ಯವಿದೆ. ಡೆವಲಪರ್ ಅಂತರರಾಷ್ಟ್ರೀಯ ವಿಸ್ತರಣೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿದರೆ, ಇನ್ನೊಂದು ದೇಶದ ಬಳಕೆದಾರರಿಗೆ ಅವರ ಸ್ಥಳೀಯ ಭಾಷೆಯಲ್ಲಿ ಇಂಟರ್ಫೇಸ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಅವಕಾಶವನ್ನು ನೀಡುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಈ ಲೇಖನದಲ್ಲಿ, ನಾವು ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ರಿಯಾಕ್ಟ್ ಸ್ಥಳೀಯ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ ಪ್ರತಿಕ್ರಿಯಿಸಿ-ಸ್ಥಳೀಯ-ಸ್ಥಳೀಕರಿಸಿ.

ಸ್ಕಿಲ್‌ಬಾಕ್ಸ್ ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ: ಶೈಕ್ಷಣಿಕ ಆನ್‌ಲೈನ್ ಕೋರ್ಸ್ "ವೃತ್ತಿ ಜಾವಾ ಡೆವಲಪರ್".
ನಾವು ನೆನಪಿಸುತ್ತೇವೆ: ಎಲ್ಲಾ Habr ಓದುಗರಿಗೆ - Habr ಪ್ರೊಮೊ ಕೋಡ್ ಬಳಸಿಕೊಂಡು ಯಾವುದೇ ಸ್ಕಿಲ್‌ಬಾಕ್ಸ್ ಕೋರ್ಸ್‌ಗೆ ದಾಖಲಾಗುವಾಗ 10 ರೂಬಲ್ ರಿಯಾಯಿತಿ.

ಪರಿಕರಗಳು ಮತ್ತು ಕೌಶಲ್ಯಗಳು

ಈ ಲೇಖನವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ರಿಯಾಕ್ಟ್ ನೇಟಿವ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಲ್ಲಿ ನಿಮಗೆ ಮೂಲಭೂತ ಕೌಶಲ್ಯಗಳು ಬೇಕಾಗುತ್ತವೆ. ಕೆಲಸ ಮಾಡುವ ಯಂತ್ರದ ಸೆಟ್ಟಿಂಗ್‌ಗಳೊಂದಿಗೆ ನೀವೇ ಪರಿಚಿತರಾಗಲು, ನೀವು ಮಾಡಬಹುದು ಅಧಿಕೃತ ಸೂಚನೆಗಳನ್ನು ಬಳಸಿ.

ನಮಗೆ ಸಾಫ್ಟ್‌ವೇರ್ ಪರಿಕರಗಳ ಈ ಆವೃತ್ತಿಗಳು ಬೇಕಾಗುತ್ತವೆ:

• ನೋಡ್ v10.15.0
• npm 6.4.1
• ನೂಲು 1.16.0
• ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ 0.59.9
• ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ-ಸ್ಥಳೀಕರಣ 1.1.3
• i18n-js 3.3.0

ಪ್ರಾರಂಭಿಸುವುದು

ನಾವು ಇಂಗ್ಲಿಷ್, ಫ್ರೆಂಚ್ ಮತ್ತು ಅರೇಬಿಕ್ ಅನ್ನು ಬೆಂಬಲಿಸುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ಮೊದಲು ನಾವು react-native-cli ಅನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ಯೋಜನೆಯನ್ನು ರಚಿಸುತ್ತೇವೆ. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಇದನ್ನು ಟರ್ಮಿನಲ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ:

$ ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ init ಬಹುಭಾಷೆ
$ ಸಿಡಿ ಬಹುಭಾಷೆ

ಅಗತ್ಯ ಗ್ರಂಥಾಲಯಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ

ಕೆಳಗಿನವುಗಳನ್ನು ಟೈಪ್ ಮಾಡುವ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯೆ-ಸ್ಥಳೀಯ-ಸ್ಥಳೀಕರಣವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಮೊದಲ ಹಂತವಾಗಿದೆ:
$ ನೂಲು ಸೇರಿಸಿ ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ-ಸ್ಥಳೀಕರಣ

ಅನುಸ್ಥಾಪನೆಯ ಸಮಯದಲ್ಲಿ ಸಮಸ್ಯೆಗಳು ಸಂಭವಿಸಿದಲ್ಲಿ, ಅನುಸ್ಥಾಪನಾ ಕೈಪಿಡಿಯನ್ನು ಓದುವುದು ಯೋಗ್ಯವಾಗಿದೆ.

ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ-ಸ್ಥಳೀಕರಣ ಗ್ರಂಥಾಲಯವು ಡೆವಲಪರ್‌ಗೆ ಬಹುಭಾಷಾ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ. ಆದರೆ ಆಕೆಗೆ ಇನ್ನೂ ಒಂದು ಲೈಬ್ರರಿ ಬೇಕು - 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;
};

ಸರಿ, ಈಗ ನಾವು ಅಪ್ಲಿಕೇಶನ್ ವರ್ಗದ ಒಂದು ಘಟಕವನ್ನು ರಚಿಸೋಣ:

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(), ಆರಂಭಿಕ ಸಂರಚನೆಯನ್ನು ಹೊಂದಿಸುತ್ತದೆ.

ನಂತರ ನೀವು ಕಾಂಪೊನೆಂಟ್ ಡಿಡ್‌ಮೌಂಟ್‌ಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ, ಈ ಅಂಶವು ನವೀಕರಣಗಳನ್ನು ಆಲಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳು ಸಂಭವಿಸಿದಾಗ ಹ್ಯಾಂಡಲ್‌ಲೊಕಲೈಸೇಶನ್‌ಚೇಂಜ್ () ಗೆ ಕರೆ ಮಾಡುತ್ತದೆ.

ಹ್ಯಾಂಡಲ್‌ಲೋಕಲೈಸೇಶನ್ ಚೇಂಜ್() ವಿಧಾನವು setI18nConfig() ಮತ್ತು forceUpdate() ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. Android ಸಾಧನಗಳಿಗೆ ಇದು ಅವಶ್ಯಕವಾಗಿದೆ ಏಕೆಂದರೆ ಬದಲಾವಣೆಗಳು ಗಮನಾರ್ಹವಾಗಲು ಘಟಕವನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು.

ನಂತರ ನೀವು ಕಾಂಪೊನೆಂಟ್‌ವಿಲ್‌ಅನ್‌ಮೌಂಟ್ () ವಿಧಾನದಿಂದ ಆಲಿಸುವಿಕೆಯನ್ನು ತೆಗೆದುಹಾಕಬೇಕಾಗುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ಭಾಷಾಂತರ () ಅನ್ನು ಬಳಸಿಕೊಂಡು ಮತ್ತು ಅದಕ್ಕೆ ಪ್ರಮುಖ ನಿಯತಾಂಕವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ರೆಂಡರ್ () ಹಲೋ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಈ ಹಂತಗಳ ನಂತರ, ಅಪ್ಲಿಕೇಶನ್ ಯಾವ ಭಾಷೆಯ ಅಗತ್ಯವಿದೆ ಎಂಬುದನ್ನು "ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು" ಮತ್ತು ಅದರಲ್ಲಿ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

ಅಪ್ಲಿಕೇಶನ್ ಬಿಡುಗಡೆ

ಅನುವಾದವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸುವ ಸಮಯ ಇದೀಗ.

ಮೊದಲಿಗೆ, ನಾವು ಟೈಪ್ ಮಾಡುವ ಮೂಲಕ ಸಿಮ್ಯುಲೇಟರ್ ಅಥವಾ ಎಮ್ಯುಲೇಟರ್ನಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ

$ ರಿಯಾಕ್ಟ್-ನೇಟಿವ್ ರನ್-ಐಒಎಸ್
$ ರಿಯಾಕ್ಟ್-ಸ್ಥಳೀಯ ರನ್-ಆಂಡ್ರಾಯ್ಡ್

ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಈಗ ನೀವು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೂಲಕ ಭಾಷೆಯನ್ನು ಫ್ರೆಂಚ್‌ಗೆ ಬದಲಾಯಿಸಲು ಪ್ರಯತ್ನಿಸಬಹುದು.

ನಾವು ಅರೇಬಿಕ್‌ನೊಂದಿಗೆ ಅದೇ ಕೆಲಸವನ್ನು ಮಾಡುತ್ತೇವೆ, ಯಾವುದೇ ವ್ಯತ್ಯಾಸವಿಲ್ಲ.

ಇಲ್ಲಿಯವರೆಗೆ ಎಲ್ಲವೂ ಸರಿಯಾಗಿದೆ.

ಆದರೆ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಯಾವುದೇ ಅನುವಾದವಿಲ್ಲದ ಯಾದೃಚ್ಛಿಕ ಭಾಷೆಯನ್ನು ನೀವು ಆರಿಸಿದರೆ ಏನಾಗುತ್ತದೆ?

ಫೈಂಡ್‌ಬೆಸ್ಟ್‌ಲ್ಯಾಂಗ್ವೇಜ್‌ನ ಕಾರ್ಯವು ಲಭ್ಯವಿರುವ ಎಲ್ಲವುಗಳಿಂದ ಸೂಕ್ತ ಅನುವಾದವನ್ನು ಒದಗಿಸುವುದು ಎಂದು ಅದು ತಿರುಗುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ, ಡೀಫಾಲ್ಟ್ ಭಾಷೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ನಾವು ಫೋನ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಬಗ್ಗೆ ಮಾತನಾಡುತ್ತಿದ್ದೇವೆ. ಉದಾಹರಣೆಗೆ, ಐಒಎಸ್ ಎಮ್ಯುಲೇಟರ್ನಲ್ಲಿ ನೀವು ಭಾಷೆಗಳ ಕ್ರಮವನ್ನು ನೋಡಬಹುದು.

ಆಯ್ಕೆಮಾಡಿದ ಭಾಷೆಯು ಆದ್ಯತೆಯ ಭಾಷೆಯಾಗಿಲ್ಲದಿದ್ದರೆ, findBestAvailableLanguage ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸದೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಆದ್ದರಿಂದ ಡೀಫಾಲ್ಟ್ ಭಾಷೆಯನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ.

ಬೋನಸ್

react-native-localize ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಭಾಷಾ ಅಂಶಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುವ API ಅನ್ನು ಹೊಂದಿದೆ. ನೀವು ಕೆಲಸವನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ದಸ್ತಾವೇಜನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ.

ಸಂಶೋಧನೆಗಳು

ಯಾವುದೇ ಸಮಸ್ಯೆಗಳಿಲ್ಲದೆ ಅಪ್ಲಿಕೇಶನ್ ಬಹುಭಾಷಾ ಮಾಡಬಹುದು. React-native-localize ಎಂಬುದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಬಳಕೆದಾರರ ನೆಲೆಯನ್ನು ವಿಸ್ತರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ.

ಯೋಜನೆಯ ಮೂಲ ಕೋಡ್ ಇಲ್ಲಿದೆ.

ಸ್ಕಿಲ್‌ಬಾಕ್ಸ್ ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ:

• ಎರಡು ವರ್ಷಗಳ ಪ್ರಾಯೋಗಿಕ ಕೋರ್ಸ್ "ನಾನು PRO ವೆಬ್ ಡೆವಲಪರ್".
• ಆನ್‌ಲೈನ್ ಕೋರ್ಸ್ "ಮೊದಲಿನಿಂದ C# ಡೆವಲಪರ್".
• ಪ್ರಾಯೋಗಿಕ ಒಂದು ವರ್ಷದ ಕೋರ್ಸ್ "0 ರಿಂದ PRO ವರೆಗೆ PHP ಡೆವಲಪರ್".

ಮೂಲ: www.habr.com