65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React from 'react';
|
||
import { View, StyleSheet, TextInput, Platform } from 'react-native';
|
||
import { SerifText } from './SerifText';
|
||
import { OnboardingColors } from '@/constants/OnboardingTheme';
|
||
|
||
interface NameInputStepProps {
|
||
value: string;
|
||
onChangeText: (text: string) => void;
|
||
onSubmitEditing?: () => void;
|
||
}
|
||
|
||
export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInputStepProps) {
|
||
return (
|
||
<View style={styles.container}>
|
||
<SerifText style={styles.title}>我可以怎么称呼你？</SerifText>
|
||
|
||
<View style={styles.inputContainer}>
|
||
<TextInput
|
||
style={styles.input}
|
||
value={value}
|
||
onChangeText={onChangeText}
|
||
placeholder="Hao"
|
||
placeholderTextColor={OnboardingColors.textSecondary}
|
||
selectionColor={OnboardingColors.cursor}
|
||
autoFocus
|
||
onSubmitEditing={onSubmitEditing}
|
||
returnKeyType="done"
|
||
textAlign="center"
|
||
/>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
alignItems: 'center',
|
||
width: '100%',
|
||
},
|
||
title: {
|
||
fontSize: 24,
|
||
marginBottom: 40,
|
||
textAlign: 'center',
|
||
},
|
||
inputContainer: {
|
||
width: '100%',
|
||
backgroundColor: OnboardingColors.cardBackground,
|
||
borderRadius: 20,
|
||
paddingVertical: 20,
|
||
paddingHorizontal: 24,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.05,
|
||
shadowRadius: 10,
|
||
elevation: 2,
|
||
},
|
||
input: {
|
||
fontSize: 24,
|
||
fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }),
|
||
color: OnboardingColors.textPrimary,
|
||
textAlign: 'center',
|
||
padding: 0, // remove default padding
|
||
},
|
||
});
|