Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 7x 7x 7x | /**
* 注册页面
*/
import { View, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Text, YStack } from 'tamagui';
import { LottieAnimation } from '@/src/components/LottieAnimation';
import { Button, Input } from '@/src/design-system';
import { infoScale, neutralScale } from '@/src/design-system/tokens';
import { useRegisterForm } from '../hooks';
export function RegisterScreen() {
const insets = useSafeAreaInsets();
const {
email,
username,
password,
errors,
isLoading,
handleEmailChange,
handleUsernameChange,
handlePasswordChange,
handleRegister,
navigateBack,
} = useRegisterForm();
return (
<View testID="register-screen" style={{ flex: 1 }}>
<YStack
flex={1}
justifyContent="center"
alignItems="center"
paddingHorizontal="$8"
paddingTop={insets.top + 16}
paddingBottom={insets.bottom + 80}
backgroundColor="$background"
>
<LottieAnimation
source={require('@/assets/animations/cat_playing.json')}
width={300}
height={200}
/>
<Text fontSize="$9" fontWeight="bold" marginBottom="$3" textAlign="center">
注册新账号
</Text>
<Text fontSize="$5" color={neutralScale.neutral9} marginBottom="$6" textAlign="center">
加入Pet Love大家庭
</Text>
<YStack width="100%" maxWidth={400} gap="$3">
<Input
size="lg"
placeholder="邮箱地址"
value={email}
onChangeText={handleEmailChange}
autoCapitalize="none"
keyboardType="email-address"
autoComplete="email"
disabled={isLoading}
error={!!errors.email}
errorMessage={errors.email}
testID="register-email-input"
/>
<Input
size="lg"
placeholder="用户名（3-150个字符）"
value={username}
onChangeText={handleUsernameChange}
autoCapitalize="none"
disabled={isLoading}
error={!!errors.username}
errorMessage={errors.username}
testID="register-username-input"
/>
<Input
size="lg"
placeholder="密码（至少6位，含字母和数字）"
value={password}
onChangeText={handlePasswordChange}
secureTextEntry
disabled={isLoading}
error={!!errors.password}
errorMessage={errors.password}
testID="register-password-input"
/>
<Button
size="lg"
variant="primary"
onPress={handleRegister}
loading={isLoading}
fullWidth
marginTop="$2"
testID="register-button"
>
注册
</Button>
<YStack alignItems="center" marginTop="$2">
<TouchableOpacity onPress={navigateBack} testID="back-button">
<Text color={infoScale.info9} fontSize="$4" pressStyle={{ opacity: 0.7 }}>
已有账号？返回登录
</Text>
</TouchableOpacity>
</YStack>
</YStack>
</YStack>
</View>
);
}
|