国际化

一、 i18n

Internationalization 首末字母与字符数。
能根据不同的语言及地区显示相应的界面。

原理：
1、语言作为静态资源单独保存：xml,json
2、每种语言对应一个文件
3、切换语言设置时，语言文件也会随之切换
工具：

• i18next:目前最主流的框架
• react-i18next:i18next的React框架
  官网：
  react-i18next

1、安装

npm install react-i18next i18next --save//原生支持typescript 不需要额外安装声明文件

2、使用

（1）、目录

i18n
    config.ts
    zh.json
    en.json 

//i18n/config.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translation_en from "./en.json"
import translation_zh from "./zh.json"
const resources = {
  en: {
    translation: translation_en 
  },
  zh: {
    translation: translation_zh 
  }
};
i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "zh", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

  export default i18n;

//index.ts
import "i18n/config"//react-i18next会帮我们自动注入

（2）、使用
类组件中使用

import { withTranslation,WithTranslation } from "react-i18next"

class TestComponent extends React.Component<WithTranslation >{
      render(){
            let { t } = this.props
            return <div>{t.header.xxx}</div>
      }
}
export default withTranslation()(TestComponent )

函数组件中使用

import { useTranslation} from "react-i18next"

function TestComponent(){
  const { t } = useTranslation()
  return <div>{t.header.xxx}</div>
}

（3）、i18n的语言切换

import i18n from 'i18next'
i18n.changeLanguage('en')