如何阻止React Native FlatList头部TextInput聚焦时滚动至列表顶部

方案一：禁用TextInput的自动滚动行为 #

直接给TextInput添加autoScrollToTopOnFocus={false}属性，这个属性会阻止组件在获取焦点时自动滚动到视图可见区域。因为你的头部已经是粘性固定在顶部的，系统默认的自动滚动逻辑会错误触发滚动到顶部的操作，关闭这个属性就能解决问题。

示例代码：

<TextInput
  autoScrollToTopOnFocus={false}
  placeholder="请输入内容"
  // 其他样式、事件属性
/>

方案二：手动锁定FlatList滚动位置 #

如果方案一在某些Android机型上不生效，可以通过FlatList的ref手动控制滚动位置：

1. 给FlatList创建引用，同时记录当前的滚动偏移量
2. 在TextInput获取焦点时，强制让FlatList滚动回之前的位置

示例代码：

import { useRef, useState } from 'react';
import { FlatList, TextInput } from 'react-native';

// ...

const flatListRef = useRef(null);
const [currentScrollY, setCurrentScrollY] = useState(0);

// ...

<FlatList
  ref={flatListRef}
  stickyHeaderIndices={[0]}
  ListHeaderComponent={() => (
    <TextInput
      onFocus={() => {
        // 聚焦时滚回之前的位置，关闭动画避免抖动
        flatListRef.current?.scrollToPosition({ y: currentScrollY, animated: false });
      }}
      placeholder="请输入内容"
    />
  )}
  // 实时记录滚动位置，scrollEventThrottle保证更新频率
  onScroll={(e) => setCurrentScrollY(e.nativeEvent.contentOffset.y)}
  scrollEventThrottle={16}
  // 其他FlatList属性（data、renderItem等）
/>

注意事项 #

• 优先尝试方案一，代码更简洁，是官方提供的针对性解决方法
• 方案二中的scrollEventThrottle设置为16是为了保证滚动位置更新的流畅性，和屏幕刷新率匹配

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