damer/mindfulness
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

onboarding: 转场动画、名字步取消自动跳页、标题个性化招呼语、Skip/提醒步等文案与交互优化

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
雷汀岚
2026-02-09 17:33:53 +08:00
parent aa4e1e9947
commit b4ec17fcac
11 changed files with 105 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/app/(onboarding)/onboarding.tsx
View File

@@ -213,6 +213,7 @@ export default function OnboardingScreen() {
onSkip={onSkip}
onBack={onBack}
showBackButton={stepIndex > 0}
userName={name}
>
{currentStep.type === 'name' && (
<NameInputStep
@@ -233,7 +234,7 @@ export default function OnboardingScreen() {
{currentStep.type === 'reminder' && (
<ReminderStep
value={reminderTimes}
value={Math.max(1, reminderTimes)}
onChange={setReminderTimes}
onFinish={onFinish}
onSkip={() => {

3
client/components/onboarding/NameInputStep.tsx
View File

@@ -95,8 +95,7 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp
blurOnSubmit={true}
onSubmitEditing={() => {
Keyboard.dismiss();
// 有输入时，“完成”直接进入下一步，避免真机卡在键盘上
if (value.trim().length > 0) onNext();
// 不再自動跳頁，僅收起鍵盤；前進需點擊底部 ➡️
}}
/>
</View>

86
client/components/onboarding/OnboardingLayout.tsx
View File

@@ -1,8 +1,11 @@
import React from 'react';
import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform, Animated, Easing } from 'react-native';
import { useTranslation } from 'react-i18next';
import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
const TRANSITION_OFFSET = 24;
const TRANSITION_DURATION = 280;
interface OnboardingLayoutProps {
children: React.ReactNode;
title?: string;
@@ -11,6 +14,8 @@ interface OnboardingLayoutProps {
onSkip: () => void;
onBack?: () => void;
showBackButton?: boolean;
/** 用户名字，仅在名字步骤之后的第一个问题（currentStep === 1）且非空时显示招呼语 */
userName?: string;
}
export function OnboardingLayout({
@@ -20,9 +25,48 @@ export function OnboardingLayout({
totalSteps,
onSkip,
onBack,
showBackButton = false
showBackButton = false,
userName = '',
}: OnboardingLayoutProps) {
const { t } = useTranslation();
const showGreeting = currentStep === 1 && userName.trim().length > 0;
const displayName = userName.trim();
const prevStepRef = useRef(currentStep);
const isFirstRenderRef = useRef(true);
const translateX = useRef(new Animated.Value(0)).current;
const opacity = useRef(new Animated.Value(1)).current;
useEffect(() => {
if (isFirstRenderRef.current) {
isFirstRenderRef.current = false;
prevStepRef.current = currentStep;
return;
}
if (prevStepRef.current === currentStep) return;
const direction = currentStep > prevStepRef.current ? 'forward' : 'back';
prevStepRef.current = currentStep;
const startX = direction === 'forward' ? TRANSITION_OFFSET : -TRANSITION_OFFSET;
translateX.setValue(startX);
opacity.setValue(0.72);
Animated.parallel([
Animated.timing(translateX, {
toValue: 0,
duration: TRANSITION_DURATION,
useNativeDriver: true,
easing: Easing.out(Easing.cubic),
}),
Animated.timing(opacity, {
toValue: 1,
duration: TRANSITION_DURATION,
useNativeDriver: true,
easing: Easing.out(Easing.cubic),
}),
]).start();
}, [currentStep, translateX, opacity]);
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
@@ -49,16 +93,29 @@ export function OnboardingLayout({
</TouchableOpacity>
</View>
{/* Title & Progress Row */}
{/* Title & Progress Row（名字步骤后第一步且名字非空时显示招呼语 + 问题） */}
<View style={styles.titleRow}>
<Text style={styles.questionTitle}>{title}</Text>
<View style={styles.titleBlock}>
{showGreeting && (
<Text style={styles.greetingText}>{t('onboardingSurvey.greeting', { name: displayName })}</Text>
)}
<Text style={styles.questionTitle}>{title}</Text>
</View>
<Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
</View>
{/* Content */}
<View style={styles.content}>
{/* Content：step 切换时滑动 + 淡入 */}
<Animated.View
style={[
styles.content,
{
opacity,
transform: [{ translateX }],
},
]}
>
{children}
</View>
</Animated.View>
</SafeAreaView>
</View>
);
@@ -114,13 +171,22 @@ const styles = StyleSheet.create({
alignItems: 'flex-end',
paddingHorizontal: 20,
marginTop: 20,
marginBottom: 20,
marginBottom: 8,
},
titleBlock: {
flex: 1,
justifyContent: 'flex-end',
},
greetingText: {
fontSize: 22,
color: OnboardingColors.questionTitle,
fontFamily: OnboardingFont.question,
marginBottom: 4,
},
questionTitle: {
fontSize: 22,
color: OnboardingColors.questionTitle,
fontFamily: OnboardingFont.question,
flex: 1,
},
progressText: {
fontSize: 18,

8
client/components/onboarding/ReminderStep.tsx
View File

@@ -19,8 +19,8 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
const insets = useSafeAreaInsets();
const handleReduce = () => {
// 允许 0～5；0 表示关闭每日提醒
if (value > 0) onChange(value - 1);
// 本页最小为 1；不接收提醒请使用右上角 Skip
if (value > 1) onChange(value - 1);
};
const handleAdd = () => {
@@ -36,7 +36,9 @@ export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
<View style={styles.numberWrapper}>
<Text style={styles.numberText}>{value}</Text>
<Text style={styles.unitText}>{t('dailyReminder.timesUnit')}</Text>
<Text style={styles.unitText}>
{value === 1 ? t('dailyReminder.timesUnitSingular') : t('dailyReminder.timesUnit')}
</Text>
</View>
<TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>

19
client/components/onboarding/SelectionStep.tsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
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';
@@ -39,16 +38,11 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
return (
<TouchableOpacity
key={option.id}
style={styles.optionCard}
style={[styles.optionCard, isSelected && styles.optionCardSelected]}
onPress={() => onToggle(option.id)}
activeOpacity={0.7}
>
<Text style={styles.optionText}>{option.label}</Text>
{isSelected && (
<View style={styles.iconWrapper}>
<SelectedIcon width={20} height={20} />
</View>
)}
</TouchableOpacity>
);
})}
@@ -67,7 +61,7 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
paddingTop: 8,
},
scroll: {
flex: 1,
@@ -82,7 +76,7 @@ const styles = StyleSheet.create({
borderRadius: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
justifyContent: 'center',
paddingHorizontal: 24,
marginBottom: 12,
shadowColor: '#000',
@@ -91,15 +85,14 @@ const styles = StyleSheet.create({
shadowRadius: 10,
elevation: 2,
},
optionCardSelected: {
backgroundColor: OnboardingColors.cardSelected,
},
optionText: {
fontSize: 18,
color: OnboardingColors.textPrimary,
fontWeight: '500',
fontFamily: OnboardingFont.question,
flex: 1,
},
iconWrapper: {
marginLeft: 10,
},
footer: {
position: 'absolute',

6
client/src/i18n/locales/all.json
View File

@@ -25,6 +25,7 @@
"q4Desc": "You can skip. We’ll stay with you along the way."
},
"onboardingSurvey": {
"greeting": "Hi {{name}},",
"steps": {
"name": { "title": "What should we call you?", "placeholder": "Mama" },
"status": {
@@ -115,6 +116,7 @@
"dailyReminder": {
"title": "Daily Reminder",
"timesUnit": "times",
"timesUnitSingular": "time",
"pushLabel": "Push Reminder",
"ok": "Ok",
"minus": "Decrease",
@@ -183,7 +185,7 @@
"progress": "{{current}}/{{total}}",
"next": "下一步",
"skip": "跳過",
"skipAll": "跳過整個引導",
"skipAll": "跳過",
"q1Title": "你最近的感受更接近哪一種？",
"q1Desc": "沒有對錯，你可以跳過，之後也能慢慢調整。",
"q2Title": "你更希望獲得哪種支持？",
@@ -194,6 +196,7 @@
"q4Desc": "你可以直接跳過，我們會在之後繼續陪你。"
},
"onboardingSurvey": {
"greeting": "{{name}}，你好",
"steps": {
"name": { "title": "我可以怎麼稱呼你？", "placeholder": "媽媽" },
"status": {
@@ -284,6 +287,7 @@
"dailyReminder": {
"title": "每日提醒",
"timesUnit": "次",
"timesUnitSingular": "次",
"pushLabel": "推送提醒",
"ok": "確定",
"minus": "減少次數",

3
client/src/i18n/locales/en.json
View File

@@ -11,7 +11,7 @@
"progress": "{{current}}/{{total}}",
"next": "Next",
"skip": "Skip",
"skipAll": "Skip onboarding",
"skipAll": "Skip",
"q1Title": "How are you feeling lately?",
"q1Desc": "No right or wrong. You can skip and adjust later.",
"q2Title": "What kind of support do you want?",
@@ -59,6 +59,7 @@
"dailyReminder": {
"title": "Daily Reminder",
"timesUnit": "times",
"timesUnitSingular": "time",
"pushLabel": "Push Reminder",
"ok": "Ok",
"minus": "Decrease",

3
client/src/i18n/locales/es.json
View File

@@ -9,7 +9,7 @@
"progress": "{{current}}/{{total}}",
"next": "Siguiente",
"skip": "Saltar",
"skipAll": "Saltar introducción",
"skipAll": "Saltar",
"q1Title": "¿Cómo te sientes últimamente?",
"q1Desc": "No hay respuestas correctas. Puedes saltar y ajustar después.",
"q2Title": "¿Qué tipo de apoyo quieres?",
@@ -57,6 +57,7 @@
"dailyReminder": {
"title": "Recordatorio diario",
"timesUnit": "veces",
"timesUnitSingular": "vez",
"pushLabel": "Recordatorio Push",
"ok": "Ok",
"minus": "Disminuir",

3
client/src/i18n/locales/pt.json
View File

@@ -9,7 +9,7 @@
"progress": "{{current}}/{{total}}",
"next": "Próximo",
"skip": "Pular",
"skipAll": "Pular introdução",
"skipAll": "Pular",
"q1Title": "Como você tem se sentido ultimamente?",
"q1Desc": "Não há certo ou errado. Você pode pular e ajustar depois.",
"q2Title": "Que tipo de apoio você quer?",
@@ -57,6 +57,7 @@
"dailyReminder": {
"title": "Lembrete diário",
"timesUnit": "vezes",
"timesUnitSingular": "vez",
"pushLabel": "Lembrete Push",
"ok": "Ok",
"minus": "Diminuir",

3
client/src/i18n/locales/zh-CN.json
View File

@@ -12,7 +12,7 @@
"progress": "{{current}}/{{total}}",
"next": "下一步",
"skip": "跳过",
"skipAll": "跳过整个引导",
"skipAll": "跳过",
"q1Title": "你最近的感受更接近哪一种？",
"q1Desc": "没有对错，你可以跳过，之后也可以慢慢调整。",
"q2Title": "你更希望获得哪种支持？",
@@ -60,6 +60,7 @@
"dailyReminder": {
"title": "每日提醒",
"timesUnit": "次",
"timesUnitSingular": "次",
"pushLabel": "推送提醒",
"ok": "确定",
"minus": "减少次数",

3
client/src/i18n/locales/zh-TW.json
View File

@@ -9,7 +9,7 @@
"progress": "{{current}}/{{total}}",
"next": "下一步",
"skip": "跳過",
"skipAll": "跳過整個引導",
"skipAll": "跳過",
"q1Title": "你最近的感受更接近哪一種？",
"q1Desc": "沒有對錯，你可以跳過，之後也能慢慢調整。",
"q2Title": "你更希望獲得哪種支持？",
@@ -57,6 +57,7 @@
"dailyReminder": {
"title": "每日提醒",
"timesUnit": "次",
"timesUnitSingular": "次",
"pushLabel": "推送提醒",
"ok": "確定",
"minus": "減少次數",