React Native中<TouchableWithoutFeedback>阻塞ScrollView滚动问题求助

return (<TouchableWithoutFeedback />)

最优方案：使用Pressable替代TouchableWithoutFeedback #

React Native的Pressable组件提供了onPressOutside属性，专门用于处理点击组件外部区域的场景，不会拦截内部可交互组件（如ScrollView）的触摸/滚动事件，完美匹配你的需求。

修改后的PageLayout代码：

import type { FC, ReactNode } from 'react'
import type { NormalLayoutProps } from '@/ts'

import { SafeAreaView, Pressable } from 'react-native'
import { tw } from '@/libs'

const PageLayout: FC<NormalLayoutProps> = (props): ReactNode => {
    const { children, onOutsideClick } = props

    return (
        <Pressable 
            onPressOutside={onOutsideClick}
            style={tw`w-full h-full bg-[#EFF4F6]`}
        >
            <SafeAreaView>
                {children}
            </SafeAreaView>
        </Pressable>
    )
}

export default PageLayout

方案说明 #

• Pressable的onPressOutside仅在点击其直接子组件范围之外时触发，完全满足你“外部点击关闭下拉菜单”的需求。
• 内部的ScrollView等组件的滚动手势不会被拦截，因为Pressable不会像TouchableWithoutFeedback那样抢占所有触摸事件，自然解决了滚动阻塞的问题。
• 无需额外的事件阻止逻辑（e.stopPropagation()/e.preventDefault()），这些逻辑正是原代码中导致滚动失效的核心原因。

备选方案（不推荐） #

如果因项目限制无法切换到Pressable，可通过手势响应器控制TouchableWithoutFeedback的事件拦截：

import type { FC, ReactNode } from 'react'
import type { NormalLayoutProps } from '@/ts'

import { SafeAreaView, TouchableWithoutFeedback, GestureResponderEvent, findNodeHandle, ScrollView } from 'react-native'
import { tw } from '@/libs'
import { useRef } from 'react'

const PageLayout: FC<NormalLayoutProps> = (props): ReactNode => {
    const { children, onOutsideClick } = props
    const scrollViewRef = useRef<ScrollView>(null)

    const handlePress = () => {
        onOutsideClick?.()
    }

    const onStartShouldSetResponder = (e: GestureResponderEvent) => {
        // 判断点击目标是否为ScrollView，避免拦截滚动事件
        if (scrollViewRef.current) {
            const scrollViewNode = findNodeHandle(scrollViewRef.current)
            return e.target !== scrollViewNode
        }
        return true
    }

    // 注意：此方案需要给内部ScrollView添加ref，仅适合单一ScrollView的场景，全局布局中扩展性差
    return (
        <TouchableWithoutFeedback 
            onPress={handlePress} 
            style={tw`w-full h-full bg-[#EFF4F6]`}
            onStartShouldSetResponder={onStartShouldSetResponder}
        >
            <SafeAreaView>
                {React.Children.map(children, child => 
                    React.isValidElement(child) && child.type === ScrollView 
                        ? React.cloneElement(child, { ref: scrollViewRef }) 
                        : child
                )}
            </SafeAreaView>
        </TouchableWithoutFeedback>
    )
}

export default PageLayout

此备选方案需要手动追踪内部ScrollView的实例，扩展性差，仅作为无法使用Pressable时的临时解决办法。

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