React Native实现ScrollView加载时自动滚动到当前月份位置

我明白你想要实现的效果：页面加载完成后，横向的月份选择ScrollView自动定位到当前系统月份的位置。我来帮你一步步解决这个问题，顺便优化下你目前重复的代码结构，这样后续维护起来更方便。

第一步：优化重复的月份组件渲染 #

你现在每个月份都写了重复的TouchableOpacity，这不仅冗余还不好维护。我们可以把月份数据整理成数组，通过循环来渲染，同时把分散的underlineMonth1到underlineMonth12状态合并成一个currentMonthIndex，管理起来更高效：

// 在组件内定义月份标签数组（从I18n统一获取）
const monthLabels = Array.from({ length: 12 }, (_, index) => I18n.t(`month${index + 1}`));

// 渲染部分简化为循环
render() {
  const { currentMonthIndex } = this.state;
  return (
    <ScrollView
      ref={this.scrollViewRef}
      horizontal={true}
      showsHorizontalScrollIndicator={false}
    >
      {monthLabels.map((month, index) => (
        <TouchableOpacity
          key={index}
          onPress={() => this.onPressDate(month)}
          style={styles.month}
        >
          <View style={{ alignSelf: 'center' }}>
            <Text
              style={[
                commonStyle.normalItemBold,
                { color: currentMonthIndex === index ? '#000' : '#9B9B9B' }
              ]}
            >
              {month}
            </Text>
            <View
              style={[
                styles.rowSep,
                { opacity: currentMonthIndex === index ? 1 : 0 }
              ]}
            />
          </View>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
}

第二步：实现自动滚动到当前月份 #

要实现加载后自动滚动，我们需要完成两个核心操作：获取ScrollView的引用，以及计算当前月份的位置并触发滚动。

1. 创建ScrollView与月份项的引用

在组件构造函数里初始化ref，同时设置默认的当前月份（系统月份getMonth()返回0-11，对应1-12月）：

constructor(props) {
  super(props);
  this.scrollViewRef = React.createRef();
  this.monthRefs = []; // 存储每个月份项的ref，用于获取位置
  this.state = {
    currentMonthIndex: new Date().getMonth()
  };
}

2. 计算位置并触发滚动

在componentDidMount生命周期里，我们通过measure方法获取当前月份项的实际位置，然后调用ScrollView的scrollTo方法实现滚动：

componentDidMount() {
  // 延迟执行确保组件渲染完成
  setTimeout(() => {
    this.scrollToCurrentMonth();
  }, 100);
}

scrollToCurrentMonth = () => {
  const { currentMonthIndex } = this.state;
  const currentMonthNode = React.findNodeHandle(this.monthRefs[currentMonthIndex]);
  
  if (currentMonthNode && this.scrollViewRef.current) {
    // 获取月份项的位置信息
    UIManager.measure(currentMonthNode, (_, __, ___, ____, pageX) => {
      this.scrollViewRef.current.scrollTo({
        x: pageX,
        animated: true // 开启平滑滚动动画
      });
    });
  }
}

别忘了在渲染月份项时存储ref：

// 渲染时给每个TouchableOpacity添加ref
<TouchableOpacity
  key={index}
  ref={ref => this.monthRefs[index] = ref}
  // 其他属性...
>

完整简化版组件示例 #

import React, { Component } from 'react';
import { ScrollView, TouchableOpacity, View, Text, UIManager, findNodeHandle } from 'react-native';
import I18n from './your-i18n-config'; // 替换为你的I18n路径
import commonStyle from './commonStyle'; // 替换为你的公共样式路径

class MonthScroll extends Component {
  constructor(props) {
    super(props);
    this.scrollViewRef = React.createRef();
    this.monthRefs = [];
    this.state = {
      currentMonthIndex: new Date().getMonth()
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.scrollToCurrentMonth();
    }, 100);
  }

  scrollToCurrentMonth = () => {
    const { currentMonthIndex } = this.state;
    const currentMonthNode = findNodeHandle(this.monthRefs[currentMonthIndex]);
    
    if (currentMonthNode && this.scrollViewRef.current) {
      UIManager.measure(currentMonthNode, (_, __, ___, ____, pageX) => {
        this.scrollViewRef.current.scrollTo({
          x: pageX,
          animated: true
        });
      });
    }
  }

  onPressDate = (month) => {
    const monthIndex = monthLabels.findIndex(label => label === month);
    this.setState({ currentMonthIndex: monthIndex });
  }

  render() {
    const { currentMonthIndex } = this.state;
    const monthLabels = Array.from({ length: 12 }, (_, index) => I18n.t(`month${index + 1}`));
    
    return (
      <ScrollView
        ref={this.scrollViewRef}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 10 }}
      >
        {monthLabels.map((month, index) => (
          <TouchableOpacity
            key={index}
            ref={ref => this.monthRefs[index] = ref}
            onPress={() => this.onPressDate(month)}
            style={[styles.month, { marginRight: 15 }]}
          >
            <View style={{ alignSelf: 'center' }}>
              <Text
                style={[
                  commonStyle.normalItemBold,
                  { color: currentMonthIndex === index ? '#000' : '#9B9B9B' }
                ]}
              >
                {month}
              </Text>
              <View
                style={[
                  styles.rowSep,
                  { opacity: currentMonthIndex === index ? 1 : 0, marginTop: 5 }
                ]}
              />
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    );
  }
}

const styles = {
  month: {
    paddingVertical: 10,
    minWidth: 60,
    alignItems: 'center'
  },
  rowSep: {
    width: 30,
    height: 2,
    backgroundColor: '#000'
  }
};

export default MonthScroll;

小提示 #

• 如果是函数组件，只需要把类组件的生命周期换成useEffect，ref换成useRef即可。
• 延迟执行scrollTo是为了确保ScrollView和子组件完全渲染，避免获取不到位置信息的问题。

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