如何将类组件的 onPress 滚动指定区域代码转为函数式组件？

import React, { useState, useRef } from 'react';
import {
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  Button,
  View
} from 'react-native';

export default function App() {
  // 用useState存储屏幕尺寸，替代类组件的state
  const [screenDimensions, setScreenDimensions] = useState({
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width,
  });

  // 用useRef获取ScrollView引用，替代类组件的this.scroller
  const scrollerRef = useRef(null);

  // 滚动到B区域的函数
  const scrollToB = () => {
    const targetY = screenDimensions.height * 1;
    scrollerRef.current?.scrollTo({ x: 0, y: targetY, animated: true });
    console.log("test", targetY);
  };

  // 滚动到C区域的函数
  const scrollToC = () => {
    const targetY = screenDimensions.height * 2;
    scrollerRef.current?.scrollTo({ x: 0, y: targetY, animated: true });
  };

  // 滚动到顶部的函数
  const scrollToTop = () => {
    scrollerRef.current?.scrollTo({ x: 0, y: 0, animated: true });
  };

  return (
    <ScrollView style={styles.container} ref={scrollerRef}>
      <View style={[styles.screen, styles.screenA]}>
        <Button onPress={scrollToB} title="scroll to B" />
        <Button title="scroll to C" onPress={scrollToC} />
        <Button title="scroll to Top" onPress={scrollToTop} />
        <Text style={styles.letter}>A</Text>
        <View style={styles.scrollButton}>
          <Text style={styles.scrollButtonText}>Scroll to B</Text>
        </View>
      </View>
      <View style={[styles.screen, styles.screenB]}>
        <Text style={styles.letter}>B</Text>
        <View style={styles.scrollButton}>
          <Text style={styles.scrollButtonText}>Scroll to C</Text>
        </View>
      </View>
      <View style={[styles.screen, styles.screenC]}>
        <Text style={styles.letter}>C</Text>
        <View style={styles.scrollButton}>
          <Text style={styles.scrollButtonText}>Scroll to Top</Text>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  screen: {
    backgroundColor: 'yellow',
    flexDirection: 'column',
    height: Dimensions.get('window').height,
    justifyContent: 'center'
  },
  screenA: {
    backgroundColor: '#F7CAC9',
  },
  screenB: {
    backgroundColor: '#92A8D1',
  },
  screenC: {
    backgroundColor: '#88B04B',
  },
  letter: {
    fontSize: 60,
    textAlign: 'center',
    marginVertical: 20,
  },
  scrollButton: {
    padding: 10,
    backgroundColor: 'rgba(255,255,255,0.5)',
    borderRadius: 5,
    alignSelf: 'center',
    marginTop: 20,
  },
  scrollButtonText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

关键改动说明 #

• 状态管理：用useState替代类组件的this.state，存储屏幕的宽高信息
• Ref引用：用useRef创建scrollerRef来获取ScrollView实例，替代类组件中this.scroller的写法
• 函数定义：类组件中的类方法直接转为函数组件内部的普通函数，无需处理this绑定问题
• 优化补充：移除原代码中的全局变量scrollYPos，直接在滚动函数内计算目标位置；显式添加animated: true保持滚动动画效果；给原代码中缺失样式的文本和按钮补充了基础样式，让界面显示更完整

内容的提问来源于stack exchange，提问作者Jason0011