feat: 新增多语言配置

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "i18n-ally.localesPaths": [
+    "i18n",
+    "i18n/locales",
+    "component/registrationMultiStepForm/formComponent/languages"
+  ]
+}

component/registrationMultiStepForm/formComponent/formPages/languageSwitcher.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import React, {useEffect, useState} from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert, Switch } from 'react-native';
 import { useTranslation } from '../../../../util/hooks/useTranslation';
 import { Language } from '../../../../i18n/types';
 
@@ -13,58 +13,52 @@ const LanguageSwitcher: React.FC = () => {
   
   const languages = getSupportedLanguages();
   const currentLanguage = getCurrentLanguageConfig();
+  
+  const [isEnabled, setIsEnabled] = useState<boolean>(false);
+  useEffect(() => {
+    console.log('currentLanguage....', currentLanguage);
+    const init = async () => {
+      const aa = await currentLanguage?.value || false;
+      setIsEnabled(aa);
+    };
+    init();
+  }, [currentLanguage]);
 
-  const handleLanguageChange = (language: Language) => {
-    Alert.alert(
-      format('common.confirm'),
-      `${format('settings.language')}: ${languages.find(lang => lang.code === language)?.nativeName}`,
-      [
-        { text: format('common.cancel'), style: 'cancel' },
-        { 
-          text: format('common.confirm'), 
-          onPress: () => switchLanguage(language) 
-        },
-      ]
-    );
+  const handleLanguageChange = async (newValue: boolean) => {
+    if (newValue) {
+      await switchLanguage('zh-TW');
+    } else {
+      await switchLanguage('en');
+    }
+    await setIsEnabled(newValue);
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{format('settings.language')}</Text>
-      <View style={styles.languageList}>
-        {languages.map(language => (
-          <TouchableOpacity
-            key={language.code}
-            style={[
-              styles.languageItem,
-              currentLanguage?.code === language.code && styles.selectedLanguage
-            ]}
-            onPress={() => handleLanguageChange(language.code)}
-          >
-            <Text style={[
-              styles.languageText,
-              currentLanguage?.code === language.code && styles.selectedLanguageText
-            ]}>
-              {language.nativeName}
-            </Text>
-            {currentLanguage?.code === language.code && (
-              <Text style={styles.selectedIndicator}>✓</Text>
-            )}
-          </TouchableOpacity>
-        ))}
-      </View>
+      <Text style={styles.title}>En</Text>
+      <Switch
+        trackColor={{ false: "#cccccc", true: "#02677D" }}
+        thumbColor={isEnabled ? "#ffffff" : "#f4f3f4"}
+        onValueChange={handleLanguageChange}
+        value={isEnabled}
+      />
+      <Text style={styles.title}>繁</Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 10,
+    marginLeft: 10,
   },
   title: {
+    color: '#333333',
+    marginRight: 5,
+    marginLeft: 5,
     fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 12,
   },
   languageList: {
     backgroundColor: '#f5f5f5',

component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

@@ -110,15 +110,6 @@ const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage, goToForgetPassWordP
             keyboardShouldPersistTaps="handled"
             className={`flex-1   ${screenHeight < 750 ? '' : 'space-y-8'}`}
         >
-            {/* <View className="flex-1">
-                <Switch
-                    trackColor={{ false: "#767577", true: "#81b0ff" }}
-                    thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
-                    ios_backgroundColor="#3e3e3e"
-                    onValueChange={toggleSwitch}
-                    value={isEnabled}
-                />
-            </View> */}
             <LanguageSwitcher></LanguageSwitcher>
             <View className="flex-1 py-4">
                 <View className="items-center">

i18n/index.ts

@@ -128,7 +128,6 @@ export const initI18n = async () => {
 // 语言切换函数
 export const changeLanguage = async (language: Language): Promise<boolean> => {
   try {
-    console.log('oooo', language)
     await i18n.changeLanguage(language);
     await saveLanguagePreference(language);
     return true;

i18n/locales/en/translation.json

@@ -5,6 +5,11 @@
     "tip3": "Bind your phone number to log in",
     "binding": "Press me now to go to the binding page"
   },
+  "common": {
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "title": ""
+  },
   "home": {
     "title": "Home Screen",
     "subtitle": "Welcome to our app",

i18n/locales/zh-TW/translation.json

@@ -5,6 +5,11 @@
     "tip3": "綁定手機號碼才能登入",
     "binding": "立即按我前往綁定頁面"
   },
+  "common": {
+    "confirm": "確認",
+    "cancel": "取消",
+    "title": ""
+  },
   "home": {
     "title": "首页",
     "subtitle": "欢迎使用我们的应用",

i18n/types.ts

@@ -6,11 +6,12 @@ export interface LanguageConfig {
   code: Language;
   name: string;
   nativeName: string;
+  value: boolean;
 }
 
 export const SUPPORTED_LANGUAGES: LanguageConfig[] = [
-  { code: 'en', name: 'English', nativeName: 'English' },
-  { code: 'zh-TW', name: 'Chinese', nativeName: '中文' },
+  { code: 'en', name: 'English', nativeName: 'English', value: false },
+  { code: 'zh-TW', name: 'Chinese', nativeName: '中文', value: true },
 ];
 
 // 默认命名空间