React Native+React Navigation：返回屏幕X时默认回到顶部的实现需求

针对你遇到的从屏幕Y返回屏幕X时，页面停留在之前底部位置的问题，可以通过监听屏幕焦点事件，在屏幕重新激活时主动将滚动组件重置到顶部，以下是具体实现方案：

方案一：使用useFocusEffect（函数组件推荐） #

利用React Navigation提供的useFocusEffect钩子，在屏幕X获得焦点时触发滚动到顶部的操作，适配ScrollView、FlatList、SectionList等各类滚动组件。

示例（ScrollView） #

import { useFocusEffect } from '@react-navigation/native';
import { ScrollView } from 'react-native';
import React, { useRef } from 'react';

const ScreenX = () => {
  // 创建滚动组件的ref
  const scrollRef = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      // 屏幕聚焦时滚动到顶部，animated参数控制是否启用过渡动画
      scrollRef.current?.scrollTo({ y: 0, animated: true });
    }, [])
  );

  return (
    <ScrollView ref={scrollRef}>
      {/* 你的页面内容 */}
    </ScrollView>
  );
};

export default ScreenX;

示例（FlatList） #

FlatList可通过scrollToIndex直接定位到列表第一项，或用scrollTo回到顶部：

import { useFocusEffect } from '@react-navigation/native';
import { FlatList } from 'react-native';
import React, { useRef } from 'react';

const ScreenX = () => {
  const flatListRef = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      // 滚动到列表第一项
      flatListRef.current?.scrollToIndex({ index: 0, animated: true });
      // 也可以选择直接滚动到顶部：flatListRef.current?.scrollTo({ y: 0, animated: true })
    }, [])
  );

  return (
    <FlatList
      ref={flatListRef}
      data={yourDataList}
      renderItem={({ item }) => <YourListItemComponent data={item} />}
      keyExtractor={(item) => item.id}
    />
  );
};

export default ScreenX;

方案二：使用useIsFocused钩子 #

通过useIsFocused监听屏幕焦点状态变化，在焦点激活时执行滚动操作：

import { useIsFocused } from '@react-navigation/native';
import { ScrollView } from 'react-native';
import React, { useRef, useEffect } from 'react';

const ScreenX = () => {
  const scrollRef = useRef(null);
  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused) {
      scrollRef.current?.scrollTo({ y: 0, animated: true });
    }
  }, [isFocused]);

  return (
    <ScrollView ref={scrollRef}>
      {/* 页面内容 */}
    </ScrollView>
  );
};

export default ScreenX;

方案三：类组件实现 #

如果项目仍使用类组件，可通过监听focus事件实现需求：

import React from 'react';
import { ScrollView } from 'react-native';

class ScreenX extends React.Component {
  constructor(props) {
    super(props);
    this.scrollRef = React.createRef();
  }

  componentDidMount() {
    // 添加焦点监听
    this.focusListener = this.props.navigation.addListener('focus', () => {
      this.scrollRef.current?.scrollTo({ y: 0, animated: true });
    });
  }

  componentWillUnmount() {
    // 移除监听避免内存泄漏
    this.focusListener();
  }

  render() {
    return (
      <ScrollView ref={this.scrollRef}>
        {/* 页面内容 */}
      </ScrollView>
    );
  }
}

export default ScreenX;

原理说明 #

React Navigation默认会保留屏幕组件的状态（包括滚动位置），通过监听屏幕的focus事件，我们可以在屏幕重新被激活时，主动调用滚动组件的API将位置重置到顶部，满足返回时从顶部显示的需求。

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