国际化

src/i18n/index.js

@@ -1,28 +1,26 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import * as RNLocalize from 'react-native-localize';
 
 // 导入语言包
-import en from './lang/en';
-import zh from './lang/zh';
+import en from './lang/en.json';
+import zhCN from './lang/zh-CN.json';
+
+const resources = {
+  en: { translation: en },
+  'zh-CN': { translation: zhCN }
+};
 
-// 获取设备支持的语言
-const fallbackLanguage = { languageTag: 'en', isRTL: false };
-const { languageTag } = RNLocalize.findBestAvailableLanguage(['en', 'zh']) || fallbackLanguage;
 
-// 初始化 i18n
 i18n
-  .use(initReactI18next) // 将 i18n 传递给 react-i18next
+  .use(initReactI18next)
   .init({
-    resources: {
-      en: { translation: en },
-      zh: { translation: zh },
-    },
-    lng: languageTag, // 设置初始语言
-    fallbackLng: 'en', //  fallback 语言
+    compatibilityJSON: 'v3', // 兼容Android旧版本
+    resources,
+    lng: 'en',      // 默认使用设备语言
+    fallbackLng: 'en',       // 备用语言
     interpolation: {
-      escapeValue: false, // react 已经处理了 XSS
-    },
+      escapeValue: false     // 允许HTML标签插值
+    }
   });
 
 export default i18n;

src/i18n/lang/en.js → src/i18n/lang/en.json

@@ -5,10 +5,11 @@ hello: "Hello, {{name}}",//变量
 <Button title="切换到中文" onPress={() => changeLanguage('zh')} />
 <Button title="Switch to English" onPress={() => changeLanguage('en')} />
 */
-export default {
-    team: "Team",
-    data: "Data",
-    play: "Play",
-    match: "Match",
-    me: "Me",
-};
+{
+  "welcome": "Welcome",
+  "greeting": "Hello, {{name}}!",
+  "apple": {
+    "one": "1 apple",
+    "other": "{{count}} apples"
+  }
+}

src/i18n/lang/zh.js → src/i18n/lang/zh-CN.json

@@ -5,10 +5,11 @@ hello: "Hello, {{name}}",//变量
 <Button title="切换到中文" onPress={() => changeLanguage('zh')} />
 <Button title="Switch to English" onPress={() => changeLanguage('en')} />
 */
-export default {
-  team: "球队",
-  data: "数据",
-  play: "PLAY",
-  match: "赛事",
-  me: "我的",
-};
+{
+  "welcome": "欢迎",
+  "greeting": "你好, {{name}}!",
+  "apple": {
+    "one": "1 apple",
+    "other": "{{count}} apples"
+  }
+}

src/pages/Team/index.tsx

@@ -1,21 +1,32 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity, Button } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-// import { useTranslation } from 'react-i18next';
-// const { t, i18n } = useTranslation();
+import { useTranslation } from 'react-i18next';
+
+import i18n from '../../i18n';
 
 const TeamScreen = () => {
+  const { t } = useTranslation();
   const navigation = useNavigation();
   const getJump = async (data) => {
     navigation.navigate(data);
   };
 
   const changeLanguage = async () => {
-    // i18n.changeLanguage('en');
+    console.log("i18n", i18n)
+    i18n.changeLanguage(i18n.language === 'en' ? 'zh-CN' : 'en')
+    console.log("i18n", i18n)
   };
   return (
     <View style={styles.main}>
-      <Button title="切换语言" onPress={changeLanguage} />
+      <View>
+        <Text>{t('welcome')}</Text>
+        <Text>{t('greeting', { name: 'John' })}</Text>
+        <Button
+          title="Switch Language"
+          onPress={changeLanguage}
+        />
+      </View>
       <Text>
         球队
       </Text>
@@ -25,6 +36,7 @@ const TeamScreen = () => {
 
 const styles = StyleSheet.create({
   main: {
+    paddingTop: 50
   },
 });