React Native子FlatList滚动到底部触发父FlatList滚动的解决方法

问题背景 #

实现了嵌套横向FlatList结构：父FlatList开启分页滚动，每个子项占满屏幕宽度；子项内部包含另一个横向FlatList。当前问题是子FlatList滚动到边界时，会触发父FlatList同步滚动，尝试使用onBeginDrag等回调结合状态的方式无法解决。

代码复现 #

const renderItem = ({item}:{item: any}) => {
  return (
   <>
    <FlatList 
      horizontal
      renderItem={renderItem}
      data={data}
      keyExtractor={item => item.id.toString()}
      style={{width: screen.width}}
    />
    {/* 其他组件 */}
   </>
  )
}

<FlatList 
  pagingEnabled
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
/>

解决方案 #

iOS端：动态控制父FlatList滚动权限 #

通过监听子FlatList的滚动位置，判断是否到达边界，动态开启/禁用父FlatList的滚动：

import { useState } from 'react';
import { FlatList, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';

// 控制父FlatList是否可滚动
const [parentScrollable, setParentScrollable] = useState(true);

const handleChildScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
  const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
  // 判断子FlatList是否处于左右边界
  const isLeftEdge = contentOffset.x <= 0;
  const isRightEdge = contentOffset.x >= contentSize.width - layoutMeasurement.width;
  
  // 只有子FlatList在边界时，允许父FlatList滚动
  setParentScrollable(isLeftEdge || isRightEdge);
};

// 父FlatList配置
<FlatList 
  pagingEnabled
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
  scrollEnabled={parentScrollable}
/>

// 子FlatList配置
<FlatList 
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
  style={{width: screen.width}}
  onScroll={handleChildScroll}
  scrollEventThrottle={16} // 确保滚动事件实时触发
/>

Android端：禁用嵌套滚动 #

Android平台可直接给子FlatList设置nestedScrollEnabled={false}，阻止滚动事件向上冒泡：

<FlatList 
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
  style={{width: screen.width}}
  nestedScrollEnabled={false}
/>

跨平台兼容方案 #

结合Platform模块实现两端适配：

import { Platform } from 'react-native';

// 子FlatList的跨平台配置
<FlatList 
  horizontal
  renderItem={renderItem}
  data={data}
  keyExtractor={item => item.id.toString()}
  style={{width: screen.width}}
  {...(Platform.OS === 'ios' ? {
    onScroll: handleChildScroll,
    scrollEventThrottle: 16
  } : {
    nestedScrollEnabled: false
  })}
/>

类似问题参考 #

原问题原文：Nested ScrollView block parent scroll when started scrolling in child
中文翻译：嵌套ScrollView场景下，开始滚动子ScrollView时阻止父ScrollView滚动

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