IOS小组件/文案

client/components/onboarding/NameInputStep.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Dimensions, Text } from 'react-native';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Text } from 'react-native';
 import { useTranslation } from 'react-i18next';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
 import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
 import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
 import EnterLightIcon from '@/assets/images/icon/enter_Light_icon.svg';
 
-const { height } = Dimensions.get('window');
-
 interface NameInputStepProps {
   value: string;
   onChangeText: (text: string) => void;
@@ -16,6 +15,7 @@ interface NameInputStepProps {
 
 export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProps) {
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
   const [isFocused, setIsFocused] = useState(false);
   const blinkAnim = useRef(new Animated.Value(1)).current;
   const hasInput = value.trim().length > 0;
@@ -71,7 +71,7 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
         </View>
       </View>
 
-      <View style={styles.footer}>
+      <View style={[styles.footer, { bottom: insets.bottom + 16 }]}>
         <TouchableOpacity 
           onPress={onNext} 
           disabled={!hasInput}
@@ -132,7 +132,6 @@ const styles = StyleSheet.create({
   },
   footer: {
     position: 'absolute',
-    bottom: height * 0.12,
     alignItems: 'center',
   }
 });

client/components/onboarding/ReminderStep.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, Platform, Dimensions } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
 import { useTranslation } from 'react-i18next';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
 import AddIcon from '@/assets/images/icon/add_icon.svg';
 import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
 import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
 
-const { height } = Dimensions.get('window');
-
 interface ReminderStepProps {
   value: number;
   onChange: (value: number) => void;
@@ -17,6 +16,7 @@ interface ReminderStepProps {
 
 export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStepProps) {
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   const handleReduce = () => {
     // 允许 0～5；0 表示关闭每日提醒
@@ -44,7 +44,7 @@ export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStep
         </TouchableOpacity>
       </View>
 
-      <View style={styles.footer}>
+      <View style={[styles.footer, { bottom: insets.bottom + 16 }]}>
         <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
           <BtnClicked width={87} height={57} />
         </TouchableOpacity>
@@ -92,7 +92,6 @@ const styles = StyleSheet.create({
   },
   footer: {
     position: 'absolute',
-    bottom: height * 0.12,
     alignItems: 'center',
   }
   ,

client/components/onboarding/SelectionStep.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
 import { SerifText } from './SerifText';
 import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
 import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
 import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
 
-const { height } = Dimensions.get('window');
-
 interface Option {
   id: string;
   label: string;
@@ -23,10 +22,18 @@ interface SelectionStepProps {
 
 export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }: SelectionStepProps) {
   const hasSelection = selectedIds.length > 0;
+  const insets = useSafeAreaInsets();
+  const footerBottom = insets.bottom + 16;
+  const footerButtonHeight = 57;
+  const footerPaddingBottom = footerBottom + footerButtonHeight + 24;
 
   return (
     <View style={styles.container}>
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.optionsList}>
+      <ScrollView
+        style={styles.scroll}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={[styles.optionsList, { paddingBottom: footerPaddingBottom }]}
+      >
         {options.map((option) => {
           const isSelected = selectedIds.includes(option.id);
           return (
@@ -48,7 +55,7 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
       </ScrollView>
 
       {/* 底部按钮：距离底部 12% 高度 */}
-      <View style={styles.footer}>
+      <View style={[styles.footer, { bottom: footerBottom }]}>
         <TouchableOpacity onPress={onNext} disabled={!hasSelection} activeOpacity={0.8}>
           {hasSelection ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
         </TouchableOpacity>
@@ -62,8 +69,11 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 20,
   },
+  scroll: {
+    flex: 1,
+  },
   optionsList: {
-    paddingBottom: 150, // 为底部按钮留出空间
+    // paddingBottom 由安全区 + 按钮高度动态计算，避免选项被遮住
   },
   optionCard: {
     width: '100%',
@@ -92,7 +102,6 @@ const styles = StyleSheet.create({
   },
   footer: {
     position: 'absolute',
-    bottom: height * 0.12,
     left: 0,
     right: 0,
     alignItems: 'center',