React Native Android：FlatList粘性头部TextInput获焦后列表滚至y=0

问题分析 #

在Android平台上，当FlatList的ListHeaderComponent包含TextInput时，滚动列表后聚焦输入框会触发FlatList重新计算布局，导致列表跳回y=0的位置，而iOS平台无此问题。这是由于Android系统的焦点处理逻辑与FlatList的滚动容器交互机制存在差异。

可行解决方案 #

方案1：将头部组件移出FlatList（推荐） #

把原本的ListHeaderComponent从FlatList中剥离，用外层View包裹头部和FlatList，通过设置FlatList的contentInsetTop和scrollIndicatorInsets来适配头部高度，让头部固定在顶部。这种方式从根源上避免了头部组件与FlatList滚动逻辑的冲突。

示例代码：

import React, { useState } from 'react';
import { View, FlatList, TextInput, Text, StyleSheet } from 'react-native';

// 定义头部高度
const HEADER_HEIGHT = 60;

export default function App() {
  const [inputText, setInputText] = useState('');
  // 模拟列表数据
  const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);

  return (
    <View style={styles.container}>
      {/* 独立的头部组件，固定在顶部 */}
      <View style={styles.header}>
        <TextInput
          style={styles.input}
          value={inputText}
          onChangeText={setInputText}
          placeholder="输入内容"
        />
      </View>
      <FlatList
        // 让列表内容从头部下方开始
        contentInsetTop={HEADER_HEIGHT}
        // 让滚动指示器也从头部下方开始
        scrollIndicatorInsets={{ top: HEADER_HEIGHT }}
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item}</Text>
          </View>
        )}
        keyExtractor={(item) => item}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: HEADER_HEIGHT,
    padding: 10,
    backgroundColor: '#f0f0f0',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

方案2：手动保存并恢复滚动位置 #

通过监听FlatList的滚动事件保存当前偏移量，在输入框聚焦时手动调用scrollToOffset恢复滚动位置。此方法可以缓解问题，但可能仍存在轻微闪烁。

示例代码：

import React, { useRef, useState } from 'react';
import { View, FlatList, TextInput, Text, StyleSheet } from 'react-native';

export default function App() {
  const flatListRef = useRef(null);
  const [inputText, setInputText] = useState('');
  const [scrollOffset, setScrollOffset] = useState(0);
  const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);

  // 保存滚动偏移量
  const handleScroll = (event) => {
    setScrollOffset(event.nativeEvent.contentOffset.y);
  };

  // 聚焦时恢复滚动位置
  const handleInputFocus = () => {
    if (flatListRef.current && scrollOffset > 0) {
      requestAnimationFrame(() => {
        flatListRef.current.scrollToOffset({ offset: scrollOffset, animated: false });
      });
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={data}
        ListHeaderComponent={() => (
          <View style={styles.header}>
            <TextInput
              style={styles.input}
              value={inputText}
              onChangeText={setInputText}
              placeholder="输入内容"
              onFocus={handleInputFocus}
            />
          </View>
        )}
        onScroll={handleScroll}
        scrollEventThrottle={16} // 确保滚动事件及时触发
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item}</Text>
          </View>
        )}
        keyExtractor={(item) => item}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    padding: 10,
    backgroundColor: '#f0f0f0',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingHorizontal: 8,
  },
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

总结 #

优先选择方案1，它能彻底解决滚动位置重置的问题，同时保持界面交互的流畅性；方案2可作为临时兼容方案，但体验略逊于前者。

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