fix:重复点击

client/components/onboarding/ReminderStep.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Platform, ActivityIndicator } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { LinearGradient } from 'expo-linear-gradient';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
 import AddIcon from '@/assets/images/icon/add_icon.svg';
 import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
@@ -12,9 +13,11 @@ interface ReminderStepProps {
   onChange: (value: number) => void;
   onFinish: () => void;
   onSkip?: () => void;
+  /** 完成后请求通知权限时的加载态 */
+  loading?: boolean;
 }
 
-export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
+export function ReminderStep({ value, onChange, onFinish, loading = false }: ReminderStepProps) {
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
 
@@ -30,7 +33,7 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
   return (
     <View style={styles.container}>
       <View style={styles.counterContainer}>
-        <TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
+        <TouchableOpacity onPress={handleReduce} disabled={loading} activeOpacity={0.7}>
           <ReduceIcon width={47} height={47} />
         </TouchableOpacity>
 
@@ -41,14 +44,27 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
           </Text>
         </View>
 
-        <TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
+        <TouchableOpacity onPress={handleAdd} disabled={loading} activeOpacity={0.7}>
           <AddIcon width={47} height={47} />
         </TouchableOpacity>
       </View>
 
       <View style={[styles.footer, { bottom: insets.bottom + 16 }]}>
-        <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
-          <BtnClicked width={87} height={57} />
+        <TouchableOpacity onPress={onFinish} disabled={loading} activeOpacity={0.8}>
+          <View style={styles.finishWrap}>
+            {loading ? (
+              <LinearGradient
+                colors={['#F69F7B', '#F99CC0']}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+                style={[styles.loadingPill, styles.finishDisabled]}
+              >
+                <ActivityIndicator size="small" color="#FFFFFF" />
+              </LinearGradient>
+            ) : (
+              <BtnClicked width={87} height={57} />
+            )}
+          </View>
         </TouchableOpacity>
       </View>
     </View>
@@ -92,4 +108,20 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignItems: 'center',
   },
+  finishWrap: {
+    width: 87,
+    height: 57,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  finishDisabled: {
+    opacity: 0.7,
+  },
+  loadingPill: {
+    width: 87,
+    height: 57,
+    borderRadius: 28.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });