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;