feat: 暂提

app/(tabs)/_layout.tsx

@@ -165,8 +165,10 @@ export default function TabLayout() {
   }, [token]); // 添加token作为依赖
 
   useEffect(() => {
-    prefetchChats().catch(console.error);
+    if (token) {
-  }, []);
+      prefetchChats().catch(console.error);
+    }
+  }, [token]);
 
   return (
     <Tabs

app/(tabs)/login.tsx

@@ -2,7 +2,7 @@ import Handers from '@/assets/icons/svg/handers.svg';
 import LoginIP1 from '@/assets/icons/svg/loginIp1.svg';
 import LoginIP2 from '@/assets/icons/svg/loginIp2.svg';
 import ForgetPwd from '@/components/login/forgetPwd';
-import Login from '@/components/login/login';
+import PhoneLogin from '@/components/login/phoneLogin';
 import SignUp from '@/components/login/signUp';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
@@ -10,6 +10,7 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Platform, ScrollView, StatusBar, TouchableOpacity, View, ViewStyle, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const LoginScreen = () => {
     const router = useRouter();
@@ -20,6 +21,7 @@ const LoginScreen = () => {
     const { height: windowHeight } = useWindowDimensions();
     const [showPassword, setShowPassword] = useState(false);
     const [keyboardOffset, setKeyboardOffset] = useState(0);
+    const insets = useSafeAreaInsets();
     // 判断是否有白边
     const statusBarHeight = StatusBar?.currentHeight ?? 0;
 
@@ -60,7 +62,7 @@ const LoginScreen = () => {
         >
             <ScrollView
                 contentContainerStyle={{
-                    flexGrow: 1,
+                    flexGrow: 1
                 }}
                 keyboardShouldPersistTaps="handled"
                 bounces={false}
@@ -93,7 +95,7 @@ const LoginScreen = () => {
                         </View>
                     </View>
                     <ThemedView
-                        className="w-full bg-white pt-12 px-6 relative z-20 shadow-lg pb-5"
+                        className="w-full bg-white pt-4 px-6 relative z-20 shadow-lg pb-5"
                         style={{
                             borderTopLeftRadius: 24,
                             borderTopRightRadius: 24,
@@ -101,7 +103,8 @@ const LoginScreen = () => {
                             shadowOffset: { width: 0, height: 2 },
                             shadowOpacity: 0.1,
                             shadowRadius: 8,
-                            elevation: 5
+                            elevation: 5,
+                            paddingBottom: insets.bottom
                         } as ViewStyle}
                         onLayout={handleLayout}
                     >
@@ -131,12 +134,15 @@ const LoginScreen = () => {
                                     />
                                 ),
                                 login: (
-                                    <Login
+                                    // <Login
-                                        {...commonProps}
+                                    //     {...commonProps}
-                                        setShowPassword={setShowPassword}
+                                    //     setShowPassword={setShowPassword}
-                                        showPassword={showPassword}
+                                    //     showPassword={showPassword}
-                                    />
+                                    // />
-                                    // <PhoneLogin />
+                                    <PhoneLogin  {...commonProps} />
+                                ),
+                                code: (
+                                    <PhoneLogin  {...commonProps} />
                                 )
                             };
 

components/login/code.tsx

@@ -7,14 +7,12 @@ import { useTranslation } from "react-i18next";
 import { ActivityIndicator, Animated, TextInput as RNTextInput, TextInput, TouchableOpacity, View } from "react-native";
 import { useAuth } from "../../contexts/auth-context";
 import { ThemedText } from "../ThemedText";
-import { Steps } from "./phoneLogin";
 
-interface LoginProps {
+interface CodeProps {
-    setSteps: (steps: Steps) => void;
     phone: string;
 }
 
-const Code = ({ setSteps, phone }: LoginProps) => {
+const Code = ({ phone }: CodeProps) => {
     const { t } = useTranslation();
     const { login } = useAuth();
     const [isLoading, setIsLoading] = useState(false);
@@ -71,7 +69,6 @@ const Code = ({ setSteps, phone }: LoginProps) => {
             })
 
         } catch (error) {
-            // console.error(t("auth.telLogin.sendCodeError", { ns: 'login' }), error);
         }
     }
 
@@ -97,13 +94,11 @@ const Code = ({ setSteps, phone }: LoginProps) => {
                 login(res, res.access_token || '')
                 router.replace('/user-message')
             }).catch((error) => {
-                // console.log(error);
                 setError(t("auth.telLogin.codeVaild", { ns: 'login' }));
             })
             setIsLoading(false);
         } catch (error) {
             setIsLoading(false);
-            // console.error(t("auth.telLogin.codeVaild", { ns: 'login' }), error);
         }
     }
     // 60s倒计时
@@ -116,7 +111,7 @@ const Code = ({ setSteps, phone }: LoginProps) => {
     }, [countdown]);
 
     return (
-        <View className="flex-1 bg-white p-6">
+        <View className="flex-1 bg-white px-6">
             <View className="flex-1 justify-center">
                 <View className="items-center mb-8">
                     <ThemedText className="text-2xl font-semibold mb-2 text-gray-900">
@@ -152,7 +147,7 @@ const Code = ({ setSteps, phone }: LoginProps) => {
                             style={{ width: 40, height: 40 }}
                             className="bg-[#FFF8DE] rounded-xl text-textTertiary text-3xl text-center"
                             keyboardType="number-pad"
-                            maxLength={6} // Allow pasting longer codes
+                            maxLength={6}
                             value={digit}
                             onChangeText={text => handleCodeChange(text, index)}
                             onKeyPress={({ nativeEvent }) => focusPrevious(index, nativeEvent.key)}
@@ -202,17 +197,6 @@ const Code = ({ setSteps, phone }: LoginProps) => {
                     </TouchableOpacity>
                 </View>
             </View>
-
-            <View className="py-4">
-                <TouchableOpacity
-                    className="py-3 items-center"
-                    onPress={() => setSteps('phone')}
-                >
-                    <ThemedText className="!text-buttonFill font-medium">
-                        {t("auth.telLogin.goBack", { ns: 'login' })}
-                    </ThemedText>
-                </TouchableOpacity>
-            </View>
         </View>
     )
 }

components/login/phone.tsx

@@ -9,9 +9,10 @@ interface LoginProps {
     setSteps: (steps: Steps) => void;
     setPhone: (phone: string) => void;
     phone: string;
+    updateUrlParam: (status: string, value: string) => void;
 }
 
-const Phone = ({ setSteps, setPhone, phone }: LoginProps) => {
+const Phone = ({ setSteps, setPhone, phone, updateUrlParam }: LoginProps) => {
     const { t } = useTranslation();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string>('');
@@ -30,6 +31,7 @@ const Phone = ({ setSteps, setPhone, phone }: LoginProps) => {
                 body: JSON.stringify({ phone: phone }),
             })
             setSteps('code')
+            updateUrlParam("status", "code");
             setIsLoading(false);
         } catch (error) {
             setPhone("")

components/login/phoneLogin.tsx

@@ -5,13 +5,17 @@ import Phone from "./phone";
 
 export type Steps = "phone" | "code";
 
-const PhoneLogin = () => {
+interface LoginProps {
+    updateUrlParam: (status: string, value: string) => void;
+}
+
+const PhoneLogin = ({ updateUrlParam }: LoginProps) => {
     const [steps, setSteps] = useState<Steps>("phone");
     const [phone, setPhone] = useState('');
 
     return <View>
         {
-            steps === "phone" ? <Phone setSteps={setSteps} setPhone={setPhone} phone={phone} /> : <Code setSteps={setSteps} phone={phone} />
+            steps === "phone" ? <Phone setSteps={setSteps} setPhone={setPhone} phone={phone} updateUrlParam={updateUrlParam} /> : <Code phone={phone} />
         }
     </View>
 }

i18n/locales/zh/login.json

@@ -23,7 +23,7 @@
       "allDone": "完成！"
     },
     "telLogin": {
-      "title": "验证身份",
+      "title": "请输入手机号",
       "secondTitle": "我们已发送验证码至：",
       "sendCode": "发送验证码",
       "continue": "继续",

package-lock.json

@@ -14,6 +14,7 @@
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
         "@reduxjs/toolkit": "^2.8.2",
+        "@twotalltotems/react-native-otp-input": "^1.3.11",
         "@types/p-limit": "^2.2.0",
         "@types/react-redux": "^7.1.34",
         "expo": "53.0.19",
@@ -3793,6 +3794,16 @@
         }
       }
     },
+    "node_modules/@react-native-community/clipboard": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/clipboard/-/clipboard-1.5.1.tgz",
+      "integrity": "sha512-AHAmrkLEH5UtPaDiRqoULERHh3oNv7Dgs0bTC0hO5Z2GdNokAMPT5w8ci8aMcRemcwbtdHjxChgtjbeA38GBdA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.0",
+        "react-native": ">=0.57.0"
+      }
+    },
     "node_modules/@react-native-masked-view/masked-view": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.3.2.tgz",
@@ -4645,6 +4656,15 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@twotalltotems/react-native-otp-input": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@twotalltotems/react-native-otp-input/-/react-native-otp-input-1.3.11.tgz",
+      "integrity": "sha512-xSsEMa8llYHITKgx1FGwU3uK56Kk6+abgkJpo57pLnUpYC2CZpvhkvRKhFa7Ui6BhdRuh0Ob1O7q234d3CksRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-community/clipboard": "^1.2.2"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",

package.json

@@ -15,10 +15,12 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.1.0",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
     "@reduxjs/toolkit": "^2.8.2",
+    "@twotalltotems/react-native-otp-input": "^1.3.11",
     "@types/p-limit": "^2.2.0",
     "@types/react-redux": "^7.1.34",
     "expo": "53.0.19",
@@ -81,8 +83,7 @@
     "react-native-view-shot": "4.0.3",
     "react-native-web": "~0.20.0",
     "react-native-webview": "13.13.5",
-    "react-redux": "^9.2.0",
+    "react-redux": "^9.2.0"
-    "@react-native-masked-view/masked-view": "0.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",