taro实现多语言切换

1.下载依赖

npm install react-i18next i18next i18next-browser-languagedetector -S

2.新建文件，配置文件

新建index.js文件

import Taro from '@tarojs/taro';
import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next';
import zh from './zh'
import en from './en'
import {initReactI18next} from 'react-i18next';

i18n.use(LanguageDetector) //嗅探当前浏览器语言
.use(initReactI18next) //init i18next
.init({
  //引入资源文件
  resources: {
    en: {
      translation: en,
    },
    zh: {
      translation: zh,
    },
  },
  //选择默认语言，选择内容为上述配置中的key，即en/zh
  lng: Taro.getStorageSync('language') ? Taro.getStorageSync('language') : 'en',
  debug: false,
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
})

export default i18n;

新建zh.js中文文件

export default {
  // 设置-切换语言页
  languageList: {
    title: '切换语言',
    zh: '中文',
    en: '英文',
  }
}

新建en.js英文文件

export default {
  // 设置-切换语言页
  languageList: {
    title: 'Switch Language',
    zh: 'Chinese',
    en: 'English',
  }
}

app.js文件修改配置

import Taro from '@tarojs/taro';
import React, { Component }  from 'react';
import '@tarojs/async-await';
import 'taro-ui/dist/style/index.scss';
import i18n from '@/libs/text-i18n/index'

Component.prototype.$i18n = i18n;  //封装到全局

class App extends Component {

  componentDidMount () {
    //
  }

  componentDidShow () {
  }

  componentDidHide () {}

  componentDidCatchError () {}

  // this.props.children 是将要会渲染的页面
  render () {
    return this.props.children
  }
}

export default App;

3.页面使用

import Taro from '@tarojs/taro';
import React, { Component }  from 'react';
import { View, Image, Text } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';
// 使用多语言
import { Translation } from 'react-i18next'

import './index.scss';

@observer
class LanguageList extends Component {

  state = {
  }

  componentDidShow () {
  }

  componentDidMount () {
  }
  
  UNSAFE_componentWillMount () { }

  componentDidHide () { }

  // 改变语言
  changeLang(type){
    this.$i18n.changeLanguage(type) // 'en' 'zh'等等
    // 储存语言类型
    Taro.setStorageSync('language', type);
    // 提示
    Taro.showToast({
      title: '切换语言成功',
      duration: 1000,
      icon: 'none'
    });
  }

  render() {
    return (
      <View className='language-list'>
        <Translation>
          {
            t => 
            <View className='list-content'>
              <Text className='title'>{t('languageList.title')}</Text>
              <View className='list-box'>
                <View className='libox' onClick={this.changeLang.bind(this, 'zh')}>
                  <Text className='t1'>{t('languageList.zh')}</Text>
                </View>
                <View className='libox' onClick={this.changeLang.bind(this, 'en')}>
                  <Text className='t1'>{t('languageList.en')}</Text>
                </View>
              </View>
            </View>
          }
        </Translation>
      </View>
    );
  }
}

export default LanguageList;