fix:修复

client/components/home/ThemeModal.tsx

@@ -81,7 +81,12 @@ function ThemeCard({
           {children}
           {/* 文案展示在图片中心 */}
           <View style={styles.textOverlay}>
-            <Text style={[styles.overlayTitle, selected && styles.selectedOverlayTitle]}>
+            <Text
+              style={[styles.overlayTitle, selected && styles.selectedOverlayTitle]}
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              minimumFontScale={0.85}
+            >
               {title}
             </Text>
           </View>
@@ -94,20 +99,21 @@ function ThemeCard({
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     gap: 12,
-    paddingHorizontal: 0,
+    paddingHorizontal: 4,
     paddingBottom: 50,
     paddingTop: 20,
-    justifyContent: 'center',
+    justifyContent: 'space-between',
   },
   cardContainer: {
-    alignItems: 'center',
-    width: 112,
+    flex: 1,
+    minWidth: 0,
+    alignItems: 'stretch',
   },
   previewWrapper: {
-    width: 110,
-    height: 178,
+    width: '100%',
+    aspectRatio: 110 / 178,
     borderRadius: 26,
     padding: 6.5,
     justifyContent: 'center',

client/components/onboarding/NameInputStep.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Text } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Text, Keyboard, Pressable } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
@@ -17,9 +17,27 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
   const [isFocused, setIsFocused] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const blinkAnim = useRef(new Animated.Value(1)).current;
   const hasInput = value.trim().length > 0;
 
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const subShow = Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates?.height ?? 0);
+    });
+    const subHide = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      subShow.remove();
+      subHide.remove();
+    };
+  }, []);
+
   useEffect(() => {
     const animation = Animated.loop(
       Animated.sequence([
@@ -36,8 +54,14 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
     return () => animation.stop();
   }, [blinkAnim, isFocused]);
 
+  const footerBottom = useMemo(() => {
+    // iOS 的 keyboard height 通常已包含底部安全区，避免重复叠加
+    const keyboardOffset = Math.max(0, keyboardHeight - insets.bottom);
+    return 16 + insets.bottom + keyboardOffset;
+  }, [insets.bottom, keyboardHeight]);
+
   return (
-    <View style={styles.container}>
+    <Pressable style={styles.container} onPress={Keyboard.dismiss} accessible={false}>
       <View style={styles.inputCard}>
         <View style={styles.inputWrapper}>
           {/* 显示层：文案 + 跟随的光标 */}
@@ -67,20 +91,30 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
             caretHidden={true}
             autoCorrect={false}
             spellCheck={false}
+            returnKeyType="done"
+            blurOnSubmit={true}
+            onSubmitEditing={() => {
+              Keyboard.dismiss();
+              // 有输入时，“完成”直接进入下一步，避免真机卡在键盘上
+              if (value.trim().length > 0) onNext();
+            }}
           />
         </View>
       </View>
 
-      <View style={[styles.footer, { bottom: insets.bottom + 16 }]}>
+      <View style={[styles.footer, { bottom: footerBottom }]}>
         <TouchableOpacity 
-          onPress={onNext} 
+          onPress={() => {
+            Keyboard.dismiss();
+            onNext();
+          }}
           disabled={!hasInput}
           activeOpacity={0.8}
         >
           {hasInput ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
         </TouchableOpacity>
       </View>
-    </View>
+    </Pressable>
   );
 }