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