• 簡介
• 使用過程
  • 安裝
  • 配置
    • config.js
    • zh.json
    • en.json
  • 使用
  • 語言切換

簡介

專案國際化，是要求專案內的選單及部分顯示元件的語言可以國際化（支援語言配置）
react-i18next是基於i18next的一款強大的國際化框架，可以應用在react和react-native專案中。

使用過程

安裝

需要配合i18next使用

npm install react-i18next i18next

配置

在src下新建i18n資料夾，以存放國際化相關配置
i18n資料夾中新建3個檔案：

config.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
//配置中文的配置檔案
import translation_zh from './zh.json';
//配置英文的配置檔案
import translation_en from './en.json';

const resources = {
  en: {
      translation: translation_en,
  },
  zh: {
      translation: translation_zh,
  },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'zh',
  interpolation: {
      escapeValue: false,
  },
});

export default i18n;
 

zh.json

{
    "header": {
        "register": "註冊",
        "signin": "登入",
        "home": "首頁"
    },
    "footer": {
        "detail": "版權所有 @ React"
    },
    "home": {
        "hot_recommended": "爆款推薦",
        "new_arrival": "新品上市",
        "joint_venture": "合作企業"
    },
    "content": {
        "description": "這是個中文段落"
    }
}
 

en.json

{
    "header": {
        "register": "Register",
        "signin": "Sign In",
        "home": "Home"
    },
    "footer": {
        "detail": "All rights reserved @ React"
    },
    "home": {
        "hot_recommended": "Hot Recommended",
        "new_arrival": "New arrival",
        "joint_venture": "Joint Venture"
    },
    "content": {
        "description": "this is a chinese graph"
    }
}
 

使用

1. 在index.jsx中引入國際化配置檔案

//引用國際化配置檔案
import './i18n/config';

這個配置需要在index.jsx中引入，否則會變異失敗。
2. 在元件中使用

import {useTranslation, Trans} from 'react-i18next';

function App() {
  const {t, i18n} = useTranslation();
 return (
    <>
      <div>
          <span>{t('content.description')}</span>
      </div>
      <hr/>
      <div>
          <h1>{t('header.home')}</h1>
          <li>{t('home.hot_recommended')}</li>
          {/* 還有一種方式 */}
            <li><Trans>home.new_arrival</Trans></li>
      </div>
    </>      
  );
}

export default App;

語言切換

在頁面上放置語言語言切換觸發方式

import {useTranslation} from 'react-i18next';

const ChangeLanguage = () => {
    const {i18n} = useTranslation();
    return (
        <button onClick={() => i18n.changeLanguage(i18n.language==='en'?'zh':'en')}>{i18n.language==='en'?'zh':'en'}</button>
    );
}

export default ChangeLanguage;