From 1f7a101fc507ff33bead926166dedac6dd6dbfda Mon Sep 17 00:00:00 2001 From: jinyaqiu Date: Fri, 1 Aug 2025 14:50:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9A=82=E6=8F=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(tabs)/_layout.tsx | 6 ++++-- app/(tabs)/login.tsx | 26 ++++++++++++++++---------- components/login/code.tsx | 24 ++++-------------------- components/login/phone.tsx | 4 +++- components/login/phoneLogin.tsx | 8 ++++++-- i18n/locales/zh/login.json | 2 +- package-lock.json | 20 ++++++++++++++++++++ package.json | 5 +++-- 8 files changed, 57 insertions(+), 38 deletions(-) diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 843e35c..f3e8a9a 100644 --- a/app/(tabs)/_layout.tsx +++ b/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 ( { 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 = () => { > { { 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: ( - - // + // + + ), + code: ( + ) }; diff --git a/components/login/code.tsx b/components/login/code.tsx index 62e2481..0db467d 100644 --- a/components/login/code.tsx +++ b/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 { - setSteps: (steps: Steps) => void; +interface CodeProps { 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 ( - + @@ -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) => { - - - setSteps('phone')} - > - - {t("auth.telLogin.goBack", { ns: 'login' })} - - - ) } diff --git a/components/login/phone.tsx b/components/login/phone.tsx index e39365c..92d7409 100644 --- a/components/login/phone.tsx +++ b/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(''); @@ -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("") diff --git a/components/login/phoneLogin.tsx b/components/login/phoneLogin.tsx index a509ad9..843014f 100644 --- a/components/login/phoneLogin.tsx +++ b/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("phone"); const [phone, setPhone] = useState(''); return { - steps === "phone" ? : + steps === "phone" ? : } } diff --git a/i18n/locales/zh/login.json b/i18n/locales/zh/login.json index 37839d6..96e1b5b 100644 --- a/i18n/locales/zh/login.json +++ b/i18n/locales/zh/login.json @@ -23,7 +23,7 @@ "allDone": "完成！" }, "telLogin": { - "title": "验证身份", + "title": "请输入手机号", "secondTitle": "我们已发送验证码至：", "sendCode": "发送验证码", "continue": "继续", diff --git a/package-lock.json b/package-lock.json index 61c613b..626a079 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 048dedc..05e0bca 100644 --- a/package.json +++ b/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-native-masked-view/masked-view": "0.3.2" + "react-redux": "^9.2.0" }, "devDependencies": { "@babel/core": "^7.25.2",