feat: 验证码样式

components/login/code.tsx

@@ -112,26 +112,26 @@ const Code = ({ phone }: CodeProps) => {
     }, [countdown]);
 
     return (
-        <View className="flex-1 bg-white px-2">
+        <View style={styles.container}>
-            <View className="flex-1 justify-center">
+            <View style={styles.contentContainer}>
-                <View className="items-center mb-8">
+                <View style={styles.headerContainer}>
-                    <ThemedText className="text-2xl font-semibold mb-2 text-gray-900">
+                    <ThemedText style={styles.title}>
-                        {t("auth.telLogin.title", { ns: 'login' })}
+                        {t("auth.telLogin.codeTitle", { ns: 'login' })}
                     </ThemedText>
-                    <ThemedText className="text-base text-gray-600 text-center mb-1">
+                    <ThemedText style={styles.subtitle}>
                         {t("auth.telLogin.secondTitle", { ns: 'login' })}
                     </ThemedText>
-                    <ThemedText className="text-base font-medium !text-buttonFill">
+                    <ThemedText style={styles.phoneNumber}>
                         {phone}
                     </ThemedText>
                 </View>
 
                 <OTPInputView
-                    pinCount={6} // 验证码长度
+                    pinCount={6}
                     onCodeChanged={(code) => {
                         setCode([code]);
                     }}
-                    onCodeFilled={(code) => {
+                    onCodeFilled={() => {
                         handleTelLogin()
                     }}
                     code={code.join('')}
@@ -142,25 +142,26 @@ const Code = ({ phone }: CodeProps) => {
                     placeholderCharacter="-"
                     placeholderTextColor="#AC7E35"
                 />
-                <View className={`w-full flex-row justify-end mb-[1rem] items-center ${error ? 'opacity-100' : 'opacity-0'}`}>
+                <View style={[styles.errorContainer, { opacity: error ? 1 : 0 }]}>
                     <Error />
-                    <ThemedText className="text-base font-medium !text-buttonFill ml-2">
+                    <ThemedText style={styles.errorText}>
                         {error}
                     </ThemedText>
                 </View>
 
-                <View className="flex-row justify-center mt-4">
+                <View style={styles.footerContainer}>
-                    <ThemedText className="!text-textPrimary">
+                    <ThemedText style={styles.footerText}>
                         {t("auth.telLogin.sendAgain", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
-                        if (countdown > 0) {
+                        if (countdown <= 0) {
-                            return
-                        } else {
                             sendVerificationCode()
                         }
                     }}>
-                        <ThemedText className={`!text-buttonFill font-medium ml-1 ${countdown > 0 ? '!text-gray-400' : ''}`}>
+                        <ThemedText style={[
+                            styles.resendText,
+                            countdown > 0 && styles.disabledResendText
+                        ]}>
                             {countdown > 0 ? `${countdown}s${t("auth.telLogin.resend", { ns: 'login' })}` : t("auth.telLogin.resend", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
@@ -172,14 +173,38 @@ const Code = ({ phone }: CodeProps) => {
 
 const styles = StyleSheet.create({
     container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    contentContainer: {
         flex: 1,
         justifyContent: 'center',
+    },
+    headerContainer: {
         alignItems: 'center',
-        padding: 20,
+        marginBottom: 16,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '600',
+        marginBottom: 8,
+        paddingTop: 4,
+        color: '#111827',
+    },
+    subtitle: {
+        fontSize: 16,
+        color: '#4B5563',
+        textAlign: 'center',
+        marginBottom: 4,
+    },
+    phoneNumber: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#E2793F',
     },
     otpContainer: {
         width: '100%',
-        height: 100
+        height: 80,
     },
     underlineStyleBase: {
         width: 50,
@@ -187,15 +212,43 @@ const styles = StyleSheet.create({
         borderWidth: 0,
         borderRadius: 16,
         fontSize: 18,
-        color: '#000',
+        color: '#000000',
         textAlign: 'center',
-        backgroundColor: '#FFF8DE'
+        backgroundColor: '#FFF8DE',
     },
     underlineStyleHighLighted: {
         borderColor: '#E2793F',
         backgroundColor: '#FFF8DE',
         borderWidth: 2,
     },
+    errorContainer: {
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    errorText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#E2793F',
+        marginLeft: 8,
+    },
+    footerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 8,
+    },
+    footerText: {
+        color: '#6B7280',
+    },
+    resendText: {
+        color: '#E2793F',
+        fontWeight: '500',
+        marginLeft: 4,
+    },
+    disabledResendText: {
+        color: '#9CA3AF',
+    },
 });
 
-export default Code
+export default Code;

i18n/locales/en/login.json

@@ -24,6 +24,7 @@
     },
     "telLogin": {
       "title": "Verify Your Identity",
+      "codeTitle": "Verify Your Identity",
       "secondTitle": "We’ve sent an email with your code to:",
       "sendCode": "send code",
       "continue": " Continue",

i18n/locales/zh/login.json

@@ -24,6 +24,7 @@
     },
     "telLogin": {
       "title": "请输入手机号",
+      "codeTitle": "请输入验证码",
       "secondTitle": "我们已发送验证码至：",
       "sendCode": "发送验证码",
       "continue": "继续",