React Native FlatList滚动冻结卡顿问题求助

核心原因：触摸事件被上层组件拦截 #

你的根容器用TouchableWithoutFeedback包裹了整个页面，这个组件会捕获所有触摸事件（包括滚动手势），导致FlatList无法正常响应滚动操作。只有当触摸事件未被它处理时才会向下传递，这就是列表偶尔能滚动、停止后又失效的根本原因。

解决方案 #

1. 移除全局TouchableWithoutFeedback，改用局部处理键盘收起 #

把键盘收起逻辑移到单独的触摸区域，不要让它包裹整个页面：

// 修改后的容器结构
<SafeAreaView className="h-screen bg-background px-6 pt-6">
  <SegmentedControl
    values={["Questions", "Duas"]}
    selectedIndex={section}
    tintColor="#009790"
    fontStyle={{ color: "#464646" }}
    activeFontStyle={{ color: "#FFF" }}
    onValueChange={() =>
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
    }
    backgroundColor="#FFF"
    onChange={(event) => {
      setSection(event.nativeEvent.selectedSegmentIndex);
    }}
    style={{ height: 50, borderCurve: "circular" }}
  />
  {/* 单独添加空白触摸区域用于收起键盘 */}
  <TouchableOpacity 
    className="absolute inset-0 z-0" 
    onPress={() => Keyboard.dismiss()}
  />
  {section == 0 ? <QAPage /> : <DuaPage />}
</SafeAreaView>

2. 确保FlatList的父容器布局正确 #

检查FlatList的直接父容器是否设置了flex:1，否则会导致滚动区域计算错误。比如DuaPage的根视图需要配置正确的flex布局：

// DuaPage示例结构
const DuaPage = () => {
  return (
    <View className="flex-1">
      <FlatList
        className="flex-1 w-full mt-6 gap-4 pb-20"
        showsVerticalScrollIndicator={false}
        ItemSeparatorComponent={() => <View className="h-5" />}
        data={data}
        renderItem={({ item }) => <DuaComponent item={item} />}
      />
    </View>
  )
}

3. 优化组件渲染性能（辅助排查） #

如果上述方法无效，检查DuaComponent是否存在频繁重渲染问题，用memo包裹组件减少不必要的渲染：

import { memo } from 'react';

const DuaComponent = memo(({ item }) => {
  // 原有组件内容
});

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