React Native中如何避免滚动SectionList时触发Ripple效果？

下面是几个实用的解决思路：

方法1：通过滚动状态控制Pressable的禁用状态 #

监听SectionList的滚动开始/结束事件，在滚动过程中禁用Pressable的交互，避免ripple被误触发。

代码示例：

import { useState, SectionList, Pressable } from 'react-native';

// 组件内部逻辑
const [isScrolling, setIsScrolling] = useState(false);

return (
  <SectionList
    data={list}
    renderItem={({ item }) => (
      <Pressable
        android_ripple={{ color: gray, borderless: true }}
        disabled={isScrolling}
        onPress={() => {/* 你的点击逻辑 */}}
      >
        {/* 列表项内容 */}
      </Pressable>
    )}
    onScrollBeginDrag={() => setIsScrolling(true)}
    onScrollEndDrag={() => setIsScrolling(false)}
    onMomentumScrollEnd={() => setIsScrolling(false)} // 处理惯性滚动结束的情况
  />
);

原理：滚动开始时标记isScrolling为true，禁用Pressable的交互；滚动完全停止（包括惯性滚动结束）后恢复可用，确保只有静止时点击才会触发ripple。

方法2：设置delayPressIn延迟触发按压效果 #

给Pressable添加delayPressIn属性，延迟ripple的触发时间，过滤掉滚动时的快速触碰。

代码示例：

<SectionList
  data={list}
  renderItem={({ item }) => (
    <Pressable
      android_ripple={{ color: gray, borderless: true }}
      delayPressIn={200} // 延迟200ms触发按压反馈
      onPress={() => {/* 你的点击逻辑 */}}
    >
      {/* 列表项内容 */}
    </Pressable>
  )}
/>

原理：滚动时的触碰通常是快速划过，持续时间短于设置的延迟，不会触发ripple；只有刻意点击（按住超过200ms）才会触发，既保留了点击反馈，又避免滚动误触。

方法3：用TouchableWithoutFeedback配合View的ripple效果 #

如果需要更灵活的控制，可以用TouchableWithoutFeedback处理点击逻辑，再通过View的android_ripple属性单独控制反馈触发时机。

代码示例：

import { TouchableWithoutFeedback, View, SectionList } from 'react-native';

<SectionList
  data={list}
  renderItem={({ item }) => (
    <TouchableWithoutFeedback onPress={() => {/* 你的点击逻辑 */}}>
      <View
        style={/* 列表项样式 */}
        android_ripple={{ color: gray, borderless: true }}
      >
        {/* 列表项内容 */}
      </View>
    </TouchableWithoutFeedback>
  )}
/>

原理：TouchableWithoutFeedback仅处理点击逻辑不自带反馈，而View的android_ripple只会在被真实点击时触发，滚动时的滑动不会触发该效果。

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