IOS小组件/文案

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