ਰੀਐਕਟ ਨੇਟਿਵ ਵਿੱਚ ਇੱਕ ਬਹੁ-ਭਾਸ਼ਾਈ ਐਪਲੀਕੇਸ਼ਨ ਲਿਖਣਾ

ਨਵੇਂ ਦੇਸ਼ਾਂ ਅਤੇ ਖੇਤਰਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨ ਵਾਲੀਆਂ ਅੰਤਰਰਾਸ਼ਟਰੀ ਕੰਪਨੀਆਂ ਲਈ ਉਤਪਾਦ ਸਥਾਨੀਕਰਨ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇਸੇ ਤਰ੍ਹਾਂ, ਮੋਬਾਈਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸਥਾਨੀਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਜੇਕਰ ਕੋਈ ਡਿਵੈਲਪਰ ਅੰਤਰਰਾਸ਼ਟਰੀ ਵਿਸਤਾਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਤਾਂ ਦੂਜੇ ਦੇਸ਼ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਉਹਨਾਂ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਇੰਟਰਫੇਸ ਨਾਲ ਕੰਮ ਕਰਨ ਦਾ ਮੌਕਾ ਦੇਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਪੈਕੇਜ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਰੀਐਕਟ ਨੇਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਵਾਂਗੇ ਪ੍ਰਤੀਕਿਰਿਆ-ਮੂਲ-ਸਥਾਨਕੀਕਰਨ.

ਸਕਿੱਲਬਾਕਸ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦਾ ਹੈ: ਵਿਦਿਅਕ ਔਨਲਾਈਨ ਕੋਰਸ "ਪ੍ਰੋਫੈਸ਼ਨ ਜਾਵਾ ਡਿਵੈਲਪਰ".
ਅਸੀਂ ਯਾਦ ਦਿਵਾਉਂਦੇ ਹਾਂ: "Habr" ਦੇ ਸਾਰੇ ਪਾਠਕਾਂ ਲਈ - "Habr" ਪ੍ਰਚਾਰ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਿਸੇ ਵੀ ਸਕਿੱਲਬਾਕਸ ਕੋਰਸ ਵਿੱਚ ਦਾਖਲਾ ਲੈਣ ਵੇਲੇ 10 ਰੂਬਲ ਦੀ ਛੋਟ।

ਸੰਦ ਅਤੇ ਹੁਨਰ

ਇਸ ਲੇਖ ਨੂੰ ਸਮਝਣ ਲਈ, ਤੁਹਾਨੂੰ React Native ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਬੁਨਿਆਦੀ ਹੁਨਰ ਦੀ ਲੋੜ ਹੈ। ਕੰਮ ਕਰਨ ਵਾਲੀ ਮਸ਼ੀਨ ਦੀਆਂ ਸੈਟਿੰਗਾਂ ਨਾਲ ਆਪਣੇ ਆਪ ਨੂੰ ਜਾਣੂ ਕਰਵਾਉਣ ਲਈ, ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ ਅਧਿਕਾਰਤ ਹਦਾਇਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਸਾਨੂੰ ਸਾਫਟਵੇਅਰ ਟੂਲਸ ਦੇ ਇਹਨਾਂ ਸੰਸਕਰਣਾਂ ਦੀ ਲੋੜ ਹੋਵੇਗੀ:

• ਨੋਡ v10.15.0
• npm 6.4.1
• ਧਾਗਾ 1.16.0
• ਰੀਐਕਟ-ਨੇਟਿਵ 0.59.9
• ਰੀਐਕਟ-ਨੇਟਿਵ-ਲੋਕਲਾਈਜ਼ 1.1.3
• i18n-js 3.3.0

ਸ਼ੁਰੂ ਕਰਨਾ

ਅਸੀਂ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਵਾਂਗੇ ਜੋ ਅੰਗਰੇਜ਼ੀ, ਫ੍ਰੈਂਚ ਅਤੇ ਅਰਬੀ ਦਾ ਸਮਰਥਨ ਕਰੇਗੀ। ਪਹਿਲਾਂ ਅਸੀਂ react-native-cli ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਂਦੇ ਹਾਂ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਟਰਮੀਨਲ ਵਿੱਚ ਇਹ ਟਾਈਪ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:

$ react-native init ਬਹੁ ਭਾਸ਼ਾ
$cd ਬਹੁ-ਭਾਸ਼ਾ

ਲੋੜੀਂਦੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਜੋੜਨਾ

ਪਹਿਲਾ ਕਦਮ ਇਹ ਹੈ ਕਿ ਹੇਠਾਂ ਦਿੱਤੇ ਟਾਈਪ ਕਰਕੇ ਰੀਐਕਟ-ਨੇਟਿਵ-ਲੋਕਲਾਈਜ਼ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨਾ ਹੈ:
$ yarn add react-native-localize

ਜੇਕਰ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਦੌਰਾਨ ਸਮੱਸਿਆਵਾਂ ਆਉਂਦੀਆਂ ਹਨ, ਇਹ ਇੰਸਟਾਲੇਸ਼ਨ ਮੈਨੂਅਲ ਨੂੰ ਪੜ੍ਹਨ ਦੇ ਯੋਗ ਹੈ.

ਰੀਐਕਟ-ਨੇਟਿਵ-ਲੋਕਲਲਾਈਜ਼ ਲਾਇਬ੍ਰੇਰੀ ਡਿਵੈਲਪਰ ਨੂੰ ਬਹੁ-ਭਾਸ਼ਾਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੱਕ ਪਹੁੰਚ ਦਿੰਦੀ ਹੈ। ਪਰ ਉਸਨੂੰ ਇੱਕ ਹੋਰ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਲੋੜ ਹੈ - i18n.

ਇਹ ਲੇਖ ਵਰਤੋਂ ਬਾਰੇ ਦੱਸਦਾ ਹੈ I18n.js JavaScript ਵਿੱਚ ਅਨੁਵਾਦ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ।

$ ਧਾਗੇ i18n-js ਸ਼ਾਮਲ ਕਰੋ

ਖੈਰ, ਕਿਉਂਕਿ i18n-js ਕੈਚਿੰਗ ਜਾਂ ਮੈਮੋਇਜ਼ੇਸ਼ਨ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦਾ, ਮੈਂ ਇਸ ਲਈ lodash.memoize ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਸੁਝਾਅ ਦਿੰਦਾ ਹਾਂ:

$ yarn add 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(), ਸ਼ੁਰੂਆਤੀ ਸੰਰਚਨਾ ਸੈੱਟ ਕਰਦਾ ਹੈ।

ਫਿਰ ਤੁਹਾਨੂੰ componentDidMount() ਵਿੱਚ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਹੈ, ਇਹ ਐਲੀਮੈਂਟ ਅੱਪਡੇਟਾਂ ਲਈ ਸੁਣੇਗਾ ਅਤੇ ਹੈਂਡਲਲੋਕਲਾਈਜ਼ੇਸ਼ਨ ਚੇਂਜ() ਨੂੰ ਕਾਲ ਕਰੇਗਾ ਜਦੋਂ ਉਹ ਹੋਣਗੇ।

handleLocalizationChange() ਵਿਧੀ setI18nConfig() ਅਤੇ forceUpdate() ਨੂੰ ਸਰਗਰਮ ਕਰਦੀ ਹੈ। ਇਹ ਐਂਡਰੌਇਡ ਡਿਵਾਈਸਾਂ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ ਬਦਲਾਅ ਧਿਆਨ ਦੇਣ ਯੋਗ ਹੋਣ ਲਈ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰੈਂਡਰ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

ਫਿਰ ਤੁਹਾਨੂੰ componentWillUnmount() ਵਿਧੀ ਤੋਂ ਸੁਣਨ ਨੂੰ ਹਟਾਉਣ ਦੀ ਲੋੜ ਹੈ।

ਅੰਤ ਵਿੱਚ, render() translate() ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ ਇਸ ਵਿੱਚ ਇੱਕ ਮੁੱਖ ਪੈਰਾਮੀਟਰ ਜੋੜ ਕੇ ਹੈਲੋ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਇਹਨਾਂ ਕਦਮਾਂ ਤੋਂ ਬਾਅਦ, ਐਪਲੀਕੇਸ਼ਨ "ਸਮਝਣ" ਦੇ ਯੋਗ ਹੋ ਜਾਵੇਗੀ ਕਿ ਕਿਹੜੀ ਭਾਸ਼ਾ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਸੰਦੇਸ਼ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾਣਗੇ।

ਐਪਲੀਕੇਸ਼ਨ ਲਾਂਚ

ਹੁਣ ਇਹ ਦੇਖਣ ਦਾ ਸਮਾਂ ਹੈ ਕਿ ਅਨੁਵਾਦ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ।

ਪਹਿਲਾਂ, ਅਸੀਂ ਟਾਈਪ ਕਰਕੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸਿਮੂਲੇਟਰ ਜਾਂ ਇਮੂਲੇਟਰ ਵਿੱਚ ਲਾਂਚ ਕਰਦੇ ਹਾਂ

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

ਇਹ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

ਹੁਣ ਤੁਸੀਂ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਲਾਂਚ ਕਰਕੇ ਭਾਸ਼ਾ ਨੂੰ ਫ੍ਰੈਂਚ ਵਿੱਚ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹੋ।

ਅਸੀਂ ਅਰਬੀ ਨਾਲ ਉਹੀ ਗੱਲ ਕਰਦੇ ਹਾਂ, ਕੋਈ ਫਰਕ ਨਹੀਂ ਹੈ.

ਹੁਣ ਤੱਕ ਬਹੁਤ ਵਧੀਆ.

ਪਰ ਕੀ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਬੇਤਰਤੀਬ ਭਾਸ਼ਾ ਚੁਣਦੇ ਹੋ ਜਿਸ ਲਈ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਕੋਈ ਅਨੁਵਾਦ ਨਹੀਂ ਹੈ?

ਇਹ ਪਤਾ ਚਲਦਾ ਹੈ ਕਿ FindBestLanguage ਦਾ ਕੰਮ ਸਾਰੀਆਂ ਉਪਲਬਧ ਭਾਸ਼ਾਵਾਂ ਤੋਂ ਸਰਵੋਤਮ ਅਨੁਵਾਦ ਪ੍ਰਦਾਨ ਕਰਨਾ ਹੈ। ਨਤੀਜੇ ਵਜੋਂ, ਡਿਫੌਲਟ ਭਾਸ਼ਾ ਦਿਖਾਈ ਜਾਵੇਗੀ।

ਅਸੀਂ ਫੋਨ ਸੈਟਿੰਗਾਂ ਬਾਰੇ ਗੱਲ ਕਰ ਰਹੇ ਹਾਂ। ਉਦਾਹਰਨ ਲਈ, iOS ਇਮੂਲੇਟਰ ਵਿੱਚ ਤੁਸੀਂ ਭਾਸ਼ਾਵਾਂ ਦਾ ਕ੍ਰਮ ਦੇਖ ਸਕਦੇ ਹੋ।

ਜੇਕਰ ਚੁਣੀ ਗਈ ਭਾਸ਼ਾ ਤਰਜੀਹੀ ਭਾਸ਼ਾ ਨਹੀਂ ਹੈ, ਤਾਂ FindBestAvailableLanguage ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੀ ਤਾਂ ਕਿ ਡਿਫੌਲਟ ਭਾਸ਼ਾ ਦਿਖਾਈ ਜਾਵੇ।

ਬੋਨਸ

react-native-localize ਕੋਲ ਇੱਕ API ਹੈ ਜੋ ਭਾਸ਼ਾ ਤੱਤਾਂ ਦੀ ਇੱਕ ਵੱਡੀ ਗਿਣਤੀ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਯੋਗ ਹੈ.

ਸਿੱਟਾ

ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਸਮੱਸਿਆ ਦੇ ਬਹੁ-ਭਾਸ਼ਾਈ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। React-native-localize ਇੱਕ ਵਧੀਆ ਵਿਕਲਪ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਐਪ ਦੇ ਉਪਭੋਗਤਾ ਅਧਾਰ ਨੂੰ ਵਧਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਪ੍ਰੋਜੈਕਟ ਸਰੋਤ ਕੋਡ ਇੱਥੇ ਹੈ.

ਸਕਿੱਲਬਾਕਸ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦਾ ਹੈ:

• ਦੋ ਸਾਲਾ ਪ੍ਰੈਕਟੀਕਲ ਕੋਰਸ "ਮੈਂ ਇੱਕ ਪ੍ਰੋ ਵੈੱਬ ਡਿਵੈਲਪਰ ਹਾਂ".
• Onlineਨਲਾਈਨ ਕੋਰਸ "ਸਕ੍ਰੈਚ ਤੋਂ C# ਡਿਵੈਲਪਰ".
• ਪ੍ਰੈਕਟੀਕਲ ਸਾਲ ਦਾ ਕੋਰਸ "0 ਤੋਂ PRO ਤੱਕ PHP ਡਿਵੈਲਪਰ".

ਸਰੋਤ: www.habr.com