react-native国际化

最新推荐文章于 2024-08-23 08:22:17 发布

y199710

最新推荐文章于 2024-08-23 08:22:17 发布

阅读量428

点赞数 9

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/y199710/article/details/135970350

版权

本文介绍了如何在ReactNative项目中实现国际化，包括下载并配置i18next库，加载不同语言包，使用`useTranslation`hook在组件中动态切换语言。展示了如何在`index.js`和组件中集成多语言功能，以及如何切换语言至英文。

摘要由CSDN通过智能技术生成

一、下载

en.json
{
    "Balance": "Balance",
    "Total Commission": "Total Commission",
    "Cash In": "Cash In", 
    "Cash Out": "Cash Out",
    "Quick Access Loan": "Quick Access Loan",
    "Remittance": "Remittance", 
    "Top up": "Top up",

}
bur.json
{
    "Balance": "လက်ကျန်ငွေ",
    "Total Commission": "အမြန်ချေးငွေ",
    "Cash In": "ငွေသွင်း", 
    "Cash Out": "‌ငွေထုတ်",
    "Quick Access Loan": "အမြန်ချေးငွေ",
    "Remittance": "Remittance", 
    "Top up": "ဖုန်းဘေလ်ဖြည့်",
    "More": "အခြား",
    "Tips: ": "သတိပြုရန်: ",
}

npm install react-native-localize i18n-js
yarn add react-i18next i18next

二、配置

uitils/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 导入语言资源文件
import translationEN from './translations/en.json';
import translationBUR from './translations/bur.json';

// 初始化i18n

const resources = {
    "bur": {
      translation: translationBUR,
    },
    "en": {
      translation: translationEN,
    },
  };

// 设置初始化配置
i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'bur', // 默认语言
    fallbackLng: 'en', // 如果无法找到所需语言的翻译，默认回退到英语
    keySeparator: false, // 在翻译文件中禁用键分隔符
    interpolation: {
      escapeValue: false, // 禁用字符串转义
    },
  });

export default i18n;

三、语言包

uitils/translations/xx.json

en.json
{
    "Balance": "Balance",
    "Total Commission": "Total Commission",
    "Cash In": "Cash In", 
    "Cash Out": "Cash Out",
    "Quick Access Loan": "Quick Access Loan",
    "Remittance": "Remittance", 
    "Top up": "Top up",

}
bur.json
{
    "Balance": "လက်ကျန်ငွေ",
    "Total Commission": "အမြန်ချေးငွေ",
    "Cash In": "ငွေသွင်း", 
    "Cash Out": "‌ငွေထုတ်",
    "Quick Access Loan": "အမြန်ချေးငွေ",
    "Remittance": "Remittance", 
    "Top up": "ဖုန်းဘေလ်ဖြည့်",
    "More": "အခြား",
    "Tips: ": "သတိပြုရန်: ",
}

四、引入

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import 'i18next';
import './src/utils/i18n'
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

五、使用

import { useTranslation } from 'react-i18next';
export default function HomePage() {

const { t, i18n } = useTranslation();
  return (
       <View>
           <Text>{t('More')}</Text>
       </View>
        )
    }