u
This commit is contained in:
oneao committed
1 parent
44fb48ef6a
commit
ca2fa3543d
10 files changed
+538
-382
No files matched your search
@@ -1,9 +1,39 @@
|
||||
import { Text, View } from 'react-native'
|
||||
import React, { useRef, useState } from 'react'
|
||||
import { Button, ScrollView, Text, View } from 'react-native'
|
||||
|
||||
export default function ScrollToExample() {
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
const [positions, setPositions] = useState<Record<string, number>>({})
|
||||
|
||||
const handleLayout = (name: string, event: any) => {
|
||||
const { y } = event.nativeEvent.layout
|
||||
setPositions(prev => ({ ...prev, [name]: y }))
|
||||
}
|
||||
|
||||
const scrollToField = (name: string) => {
|
||||
const y = positions[name]
|
||||
if (typeof y === 'number' && scrollRef.current) {
|
||||
scrollRef.current.scrollTo({ y, animated: true })
|
||||
}
|
||||
}
|
||||
|
||||
export default function Love() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Love</Text>
|
||||
<View style={{ flex: 1, paddingTop: 40 }}>
|
||||
<Button title="滚动到 Password" onPress={() => scrollToField('password')} />
|
||||
|
||||
<ScrollView ref={scrollRef} style={{ marginTop: 20 }}>
|
||||
<View onLayout={e => handleLayout('username', e)} style={{ height: 300, backgroundColor: '#f9c2ff', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text>Username 区域</Text>
|
||||
</View>
|
||||
|
||||
<View onLayout={e => handleLayout('email', e)} style={{ height: 300, backgroundColor: '#c2f9ff', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text>Email 区域</Text>
|
||||
</View>
|
||||
|
||||
<View onLayout={e => handleLayout('password', e)} style={{ height: 300, backgroundColor: '#ffc2c2', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Text>Password 区域</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
import type { FormWrapperRef } from '@/components/common/FormWrapper'
|
||||
import type { AFormRef } from '@/components/common/ao'
|
||||
import { Lock, UserRound } from 'lucide-react-native'
|
||||
import { useRef, useState } from 'react'
|
||||
import { Image, View } from 'react-native'
|
||||
import FormWrapper from '@/components/common/FormWrapper'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Image, ScrollView, View } from 'react-native'
|
||||
|
||||
import { AForm, AFormItem, AInput } from '@/components/common/ao'
|
||||
import { Button, ButtonSpinner, ButtonText } from '@/components/ui/button'
|
||||
import { useToast } from '@/utils/toast'
|
||||
|
||||
@@ -13,9 +14,14 @@ interface RegisterForm {
|
||||
a: string
|
||||
b: string
|
||||
c: string
|
||||
d: string
|
||||
e: string
|
||||
f: string
|
||||
}
|
||||
|
||||
export default function AuthLogin() {
|
||||
const scrollRef = useRef<ScrollView>(null)
|
||||
|
||||
const toast = useToast()
|
||||
const [form, setForm] = useState<RegisterForm>({
|
||||
username: '',
|
||||
@@ -24,9 +30,12 @@ export default function AuthLogin() {
|
||||
a: '',
|
||||
b: '',
|
||||
c: '',
|
||||
d: '',
|
||||
e: '',
|
||||
f: '',
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const formRef = useRef<FormWrapperRef>(null)
|
||||
const formRef = useRef<AFormRef>(null)
|
||||
|
||||
const handleInputChange = (field: keyof RegisterForm, value: string) => {
|
||||
setForm(prev => ({ ...prev, [field]: value }))
|
||||
@@ -44,106 +53,80 @@ export default function AuthLogin() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex flex-col items-center px-6 h-full mb-4">
|
||||
<Image source={require('@/static/images/logo.png')} style={{ width: 120, height: 120 }} className="my-12" />
|
||||
<ScrollView ref={scrollRef} style={{ flex: 1 }}>
|
||||
<View className="flex flex-col items-center px-6">
|
||||
<Image source={require('@/static/images/logo.png')} style={{ width: 120, height: 120 }} className="my-12" />
|
||||
|
||||
<FormWrapper ref={formRef} form={form}>
|
||||
<FormWrapper.FormItem
|
||||
name="username"
|
||||
label="账号"
|
||||
required
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请输入账号"
|
||||
leftIcon={UserRound}
|
||||
value={form.username}
|
||||
onChangeText={text => handleInputChange('username', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
<AForm ref={formRef} form={form} scrollRef={scrollRef}>
|
||||
<AFormItem name="username" label="账号" isRequired>
|
||||
<AInput
|
||||
placeholder="请输入账号"
|
||||
leftIcon={UserRound}
|
||||
value={form.username}
|
||||
onChange={text => handleInputChange('username', text)}
|
||||
/>
|
||||
</AFormItem>
|
||||
|
||||
<FormWrapper.FormItem
|
||||
name="password"
|
||||
label="密码"
|
||||
required
|
||||
rules={[
|
||||
(val: any) => val && !/\d{6}/.test(val) ? '请输入6位数字密码' : null,
|
||||
]}
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请输入密码"
|
||||
leftIcon={Lock}
|
||||
isPassword
|
||||
value={form.password}
|
||||
onChangeText={text => handleInputChange('password', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
<AFormItem
|
||||
name="password"
|
||||
label="密码"
|
||||
isRequired
|
||||
rules={[
|
||||
(val: any) => val && !/\d{6}/.test(val) ? '请输入6位数字密码' : null,
|
||||
]}
|
||||
>
|
||||
<AInput
|
||||
placeholder="请输入密码"
|
||||
leftIcon={Lock}
|
||||
isPassword
|
||||
value={form.password}
|
||||
onChange={text => handleInputChange('password', text)}
|
||||
/>
|
||||
</AFormItem>
|
||||
|
||||
<FormWrapper.FormItem
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
required
|
||||
rules={[
|
||||
(val: any) => val !== form.password ? '两次密码不一致' : null,
|
||||
]}
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请再次输入密码"
|
||||
leftIcon={Lock}
|
||||
isPassword
|
||||
value={form.confirmPassword}
|
||||
onChangeText={text => handleInputChange('confirmPassword', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
<FormWrapper.FormItem
|
||||
name="a"
|
||||
label="a"
|
||||
required
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请再次输入密码"
|
||||
isPassword
|
||||
value={form.a}
|
||||
onChangeText={text => handleInputChange('a', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
<FormWrapper.FormItem
|
||||
name="b"
|
||||
label="b"
|
||||
required
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请再次输入密码"
|
||||
isPassword
|
||||
value={form.a}
|
||||
onChangeText={text => handleInputChange('b', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
<FormWrapper.FormItem
|
||||
name="c"
|
||||
label="c"
|
||||
required
|
||||
>
|
||||
<FormWrapper.Input
|
||||
placeholder="请再次输入密码"
|
||||
isPassword
|
||||
value={form.c}
|
||||
onChangeText={text => handleInputChange('c', text)}
|
||||
/>
|
||||
</FormWrapper.FormItem>
|
||||
</FormWrapper>
|
||||
<AFormItem
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
isRequired
|
||||
rules={[
|
||||
(val: any) => val !== form.password ? '两次密码不一致' : null,
|
||||
]}
|
||||
>
|
||||
<AInput
|
||||
placeholder="请再次输入密码"
|
||||
leftIcon={Lock}
|
||||
isPassword
|
||||
value={form.confirmPassword}
|
||||
onChange={text => handleInputChange('confirmPassword', text)}
|
||||
/>
|
||||
</AFormItem>
|
||||
|
||||
<Button className="w-full mt-4" onPress={defaultLogin} disabled={loading}>
|
||||
{loading
|
||||
? (
|
||||
<>
|
||||
<ButtonSpinner color="gray" />
|
||||
<ButtonText>请稍等 . . .</ButtonText>
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<ButtonText>注册</ButtonText>
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
{/* 其他表单项 */}
|
||||
{['a', 'b', 'c', 'd', 'e', 'f'].map(field => (
|
||||
<AFormItem key={field} name={field} label={field} isRequired>
|
||||
<AInput
|
||||
placeholder="请输入"
|
||||
isPassword
|
||||
value={form[field]}
|
||||
onChange={text => handleInputChange(field, text)}
|
||||
/>
|
||||
</AFormItem>
|
||||
))}
|
||||
</AForm>
|
||||
|
||||
<Button className="w-full mb-4" onPress={defaultLogin} disabled={loading}>
|
||||
{loading
|
||||
? (
|
||||
<>
|
||||
<ButtonSpinner color="gray" />
|
||||
<ButtonText>请稍等 . . .</ButtonText>
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<ButtonText>注册</ButtonText>
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user