React Native app internationalization

The so-called internationalization refers to a way that products need to adapt to different regional requirements during design. In other words, internationalization requires that applications need to be designed to run in different countries and regions. Make a language switch. In mobile application development, there are usually the following two scenarios for internationalization.

Identify the language of the mobile phone system, and the APP automatically loads the corresponding language file;
Users are allowed to manually switch languages in the APP. In this case, it is not necessary to ensure the consistency of the APP language and the mobile phone system language.

As a basic software requirement, internationalization is ubiquitous in software development, especially large-scale software development. In React Native application development, the react-native-i18n plugin is needed to achieve internationalization. The installation command is as follows.

npm install react-native-i18n --save
复制代码

After the installation is complete, create a new i18n directory in the src directory to store all resource files related to internationalization, such as new en.js and zh.js files, which are used 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',
};
复制代码

zh.js

export default {
  official: '官方网站',
  cgvLink: 'www.cgv.com.cn',
  cgv: 'CGV电影',
  wechat: '微信',
  weibo: '微博',
  update: '检查新版本',
  userAgree: '用户协议',
  userPrivacy: '用户隐私制度',
  copy: 'Copyright © 2022 CGV影城版权所有',
};
复制代码

Next, create a new index.js file for configuration and management of multilingual 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'; // 默认语言为英文
}

I18n.fallbacks = true;
I18n.translations = {
    zh,
    en,
};

export function strings(name, params = {}) {
    return I18n.t(name, params);
}

export default I18n;
复制代码

Next, import the above file into the page to be used, and then use the I18n.t function provided by the i18n-js plugin to import the displayed string, as shown below.

import {strings} from '../../i18n'

<Text>{strings('copy')}</Text>
复制代码

Re-run the APP, when the language environment of the mobile phone is manually switched, the APP will automatically load the corresponding language file according to the system environment, and the effect is shown in Figure 4-27. insert image description here

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

React Native app internationalization

Guess you like