change language

src/pages/clock.tsx

@@ -1,18 +1,27 @@
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { View, Text,Button } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useTranslation } from 'react-i18next'
 import './clock.scss'
+// import { changeLanguage } from 'i18next'
 
 export default function Index() {
+    const { t, i18n } = useTranslation()
+    useLoad(() => {
+        console.log('Page loaded.')
+    })
 
-  useLoad(() => {
-    console.log('Page loaded.')
-  })
+    function changeLanguage(){
+        var strLang = Taro.getStorageSync('language') ? Taro.getStorageSync('language') : 'en'
+        strLang = strLang == 'en' ? 'zh' : 'en'
+        i18n.changeLanguage(strLang)
+        Taro.setStorageSync('language', strLang)
+    }
 
-  return (
-    <View className='index'>
-      <Text>Clock!</Text>
-      <Text>abc</Text>
-      <Text>123</Text>
-    </View>
-  )
+    return (
+        <View className='index'>
+            <Text>{t('languageList.en')}</Text>
+            <Button onTap={()=>changeLanguage()}>{t('languageList.switch_language')}</Button>
+            <Text>1234</Text>
+        </View>
+    )
 }

src/pages/index/index.tsx

@@ -1,9 +1,10 @@
 import { View, Text } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
+import { useTranslation } from 'react-i18next'
 import './index.scss'
 
 export default function Index() {
-
+  const { t, i18n } = useTranslation()
   useLoad(() => {
     console.log('Page loaded.')
   })
@@ -11,8 +12,8 @@ export default function Index() {
   return (
     <View className='index'>
       <Text>Hello world!</Text>
-      <Text>abc</Text>
-      <Text>123</Text>
+      <Text>{t('languageList.switch_language')}</Text>
+      <Text>1234</Text>
     </View>
   )
 }