Internationalization refers to the way in which products are designed to meet the requirements of different regions. In other words, internationalization requires that applications be designed to run in different countries and regions, and be able to switch languages according to the country or region in which they are located. In mobile application development, there are two common scenarios for internationalization.

  • Identify the phone system language, APP automatically load the corresponding language files;
  • Allow users to manually switch languages in the APP. In this case, there is no need to ensure that the APP language is consistent with the phone system language.

As one of the most basic software requirements, internationalization is ubiquitous in software development, especially large-scale software development. In React Native application development, the react-native i18N plug-in is required for internationalization. The installation command is as follows.

npm install react-native-i18n --save
Copy the code

After the installation is complete, create an i18n directory under the SRC directory to store all internationalization-related resource files, such as en.js and en.js files to store English and Chinese translation strings respectively. En. Js:

export default { official: 'Official WebSite', cgvLink: 'www.cgv.com.cn', cgv: 'CGV Official', wechat: 'Wechat', weibo: 'WeiBo', update: 'Check UpDate', userAgree: 'User Agree', userPrivacy: 'User Privacy', copy: 'Copyright © 2022 CGVCineplex All Rights Reserved',};Copy the code

zh.js

Export default {official: 'official website ', cgvLink: 'www.cgv.com.cn', CGV: 'CGV movie ', wechat:' wechat ', Weibo: 'weibo ', update: 'check the new version ', userAgree:' user agreement ', userPrivacy: 'userPrivacy policy ', copy: 'Copyright © 2022 CGV all rights reserved ',};Copy the code

Next, create a new index.js file for the configuration and management of multi-language files, as shown below.

import I18n from 'i18n-js'; import * as RNLocalize from 'react-native-localize'; import zh from './zh'; import en from './en'; const locales = RNLocalize.getLocales(); const systemLanguage = locales[0]? .languageCode; if (systemLanguage) { I18n.locale = systemLanguage; } else { I18n.locale = 'en'; // Default language is English} i18n. fallbacks = true; I18n.translations = { zh, en, }; export function strings(name, params = {}) { return I18n.t(name, params); } export default I18n;Copy the code

Next, import the above file in the page you want to use, and then use the i18N.t function provided by the i18N-JS plug-in to import the displayed string, as shown below.

import {strings} from '.. /.. /i18n' <Text>{strings('copy')}</Text>Copy the code

Run the APP again. When the language environment of the mobile phone is manually changed, the APP automatically loads the corresponding language file according to the system environment, as shown in Figure 4-27.

It should be noted that APP restart may occur in the process of switching system language, which is a normal phenomenon and need not be paid too much attention.