IOS小组件/文案

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',