React Native应用国际化

所谓国际化，指的是产品在设计时需要适应不同区域要求的一种方式，换句话说，国际化要求应用程序在设计时需要考虑运行在不同的国家和地区，能够根据所在的国家和地区进行语言切换。在移动应用开发中，实现国际化的场景通常有以下两种。

识别手机系统语言，APP自动加载相应的语言文件；
允许用户在APP内手动切换语言，此种情况不需要保证APP语言与手机系统语言一致性。

作为一种最基本的软件需求，国际化在软件开发中无处不在，特别是大型的软件开发。在React Native应用开发中，实现国际化需要用到react-native-i18n插件，安装命令如下。

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

安装完成之后，在src目录下新建一个i18n目录，用来存放所有与国际化相关到的资源文件，比如新建en.js和zh.js两个文件，分别用来存放英文和中文的翻译字符串。 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影城版权所有',
};
复制代码

接着，再新建一个index.js文件，用来进行多语言文件的配置和管理，如下所示。

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;
复制代码

接下来，在需要使用的页面中引入上面的文件，然后使用i18n-js插件提供的I18n.t函数引入显示的字符串即可，如下所示。

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

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

重新运行APP，当手动切换手机的语言环境时，APP就会依据系统环境自动挡加载相应的语言文件，效果如图4-27所示。在这里插入图片描述

需要说明的是，切换系统语言过程中有可能会出现APP的重启，这属于正常现象，不必过多关注。

React Native应用国际化

猜你喜欢