在 React 原生应用程序中创建多语言支持系统

安装核心库

开始安装所需的软件包:

npm install react-i18next i18next i18next-http-backend react-native-localize

可选添加i18next-浏览器语言检测器[],用于基于设备偏好自动语言检测. 注意,您可能需要将本地模块链接到反应-内在-本地化(自动链接在RN 0.60+)中.

设置 i18n 实例

创建配置文件, 例如 [[FLT: 2]] :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

使用 [[FLT: 0]] 反应- 本地化- 定位 [[FLT: 1] 保证您的应用尊重设备的区域设置。 [[FLT: 4] 函数运行一次并设置初始语言。 对于持续更新(如果用户在应用程序打开时更改其设备语言), 您可以订阅 [[FLT: 5] 修改 。

翻译文件结构

按语言和命名空间组织您在嵌入式 JSON 文件中的翻译。 示例 :

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

使用命名空间(例如,])帮助管理大型应用程序,并使得可以懒惰地加载翻译块.

使用组件中的翻译

翻译钩

在任何职能组成部分中:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

t 函数插入变量并处理复数。要更改语言,请调用 ——这触发了所有已订阅组件的重置。

使用 Trans 组件

对于带有嵌入式标记或反射组件的复杂字符串:

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

处理多元性、性别和背景

i18next 支持框外的高级复数规则。 定义密钥时, 后缀或使用 [ [FLT: 14]] 。 例 :

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

用法:根据地块自动选择正确的形式,性别和其他上下文可以通过 选项处理。

动态语言切换和持久性

要坚持用户的语言偏好,请将所选语言存储在 AsyncStorage [ (或] react-native-mmkv 中,并在应用程序启动时加载. 修改 i18n 配置 :

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

现在当用户切换语言时,首选功能会保存下来,并在下一次发射时自动恢复.

左转右转支持

React Industrial通过模块支持RTL. 当语言是阿拉伯语,希伯来语或波斯语时,强制RTL:

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

对于完整的RTL体验,请仔细使用和]. 考虑使用像 反应-内在-反式[这样的库来进行主题导向.

从服务器装入翻译( Over- the- Air)

对于需要添加语言而无需应用商店更新的应用程序,请从后端获取翻译 JSONs。使用 [ i18next- http- backend ,并带有自定义的本地语后端:

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});

缓存 AsyncStorage 中获取的翻译, 以避免重复请求。 组合到一个版本机制中, 仅下载更新的文件 。

业绩考量

• 使用命名空间分割:只为当前屏幕装入翻译。懒惰的加载会减少初始捆绑大小 。
• ] Avoid re-reforders :]]钩子已经通过只订阅语言变化来优化。用 包装昂贵的组件。
• 预编译文件:在构建过程中,将JSON转换为精密格式.
• 对于大型应用程序,考虑使用i18next-scanner[自动从您的代码库中提取翻译密钥.

测试多语言功能

为您的翻译文件撰写单元测试: 确保不丢失密钥, 所有占位符都提供, 复数工作正确。 使用模拟 i18n 等。 用于集成测试, 模拟语言交换器, 并检查显示正确文本的组件。 同时测试两个平台的 RTL 版式渲染 。

最佳做法简介

• 总是使用翻译密钥——从未使用硬码的用户-faceing字符串.
• 保持通过特性或屏幕(namespaces)排列的翻译[].
• 使用倒置语言防止不完全翻译突破UI.
• 在不同地方设置的实设备上进行测试.
• 考虑文化差异语言以外的:日期格式,颜色含义,图像.
• 为翻译和开发者记录您的i18n工作流程.

在 React Industrial 中实施多语言支持是一种值得奖励的投资。 有了像 的 react-i18next 和 的 反应-native-location 这样的库,你可以建立一个强大的系统,以用户基础为尺度。为了进一步阅读,请参考官方 的 react-i18next文档 、 i18next 核心指南 和 的 react-native-location prium。启动小的,其脚步和应用程序将用语言来表达用户的语言。