u

code/base-project/base-app/src/app/(tabs)/love.tsx

@@ -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>
   )
 }