React Native自定义Modal中ScrollView在Pressable与TouchableWithoutFeedback嵌套下滚动异常问题

看起来你遇到了一个很典型的触摸组件嵌套事件冲突问题——ScrollView只能在点击输入框的时候滚动，空区域完全没反应对吧？我之前处理过几乎一模一样的场景，根源就是外层的Pressable和TouchableWithoutFeedback拦截了ScrollView需要的滚动手势事件。

问题原因解析 #

1. 外层Pressable的事件拦截：你用Pressable包裹了整个Modal内容，并且设置了onPress={onDismiss}，它会捕获整个Modal区域的所有触摸事件。当你在ScrollView的空区域尝试滚动时，Pressable先拿到了触摸事件，直接阻断了事件传递给ScrollView，导致滚动失效。
2. TouchableWithoutFeedback的叠加影响：虽然它是用来关闭键盘的，但它的触摸事件处理也会和ScrollView的滚动事件产生冲突，进一步加剧了这个问题。

解决方案：阻止内容区域的事件冒泡 #

最直接有效的方法是让ScrollView所在的内容容器优先捕获触摸事件，不让事件传递给外层的Pressable。你只需要给styles.contentContainer对应的View添加两个触摸响应器属性即可：

<View 
  style={styles.contentContainer}
  // 添加这两行代码，让内容容器优先处理触摸/滚动事件
  onStartShouldSetResponder={() => true}
  onMoveShouldSetResponder={() => true}
>
  <View style={styles.modalStretcher} />
  {/* 后面的CloseButton、ScrollView等内容保持不变 */}
</View>

为什么这样能解决问题？ #

• onStartShouldSetResponder={() => true}：告诉React Native，当用户开始触摸这个View时，由它来接管事件处理，而不是传递给父组件（也就是外层的Pressable）。
• onMoveShouldSetResponder={() => true}：确保滚动过程中的手势事件也能被内容容器捕获，顺利传递给内部的ScrollView。

同时，这个修改不会影响你原来的功能：

• 点击Modal背景（contentContainer之外的区域）：依然会触发Pressable的onDismiss关闭Modal
• 点击内容区域的空地方：依然会触发TouchableWithoutFeedback的Keyboard.dismiss()关闭键盘
• 在内容区域任何位置（包括空区域）滚动：ScrollView都能正常响应滚动手势

完整修改后的核心代码片段 #

这里把你代码中修改的部分标出来了：

<Modal animationType="slide" transparent={true} visible={visible} onRequestClose={onDismiss} statusBarTranslucent>
  <Pressable style={[styles.container, animatedStyles]} onPress={onDismiss}>
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <KeyboardAvoidingView behavior={keyboardAvoidingBehavior} style={styles.keyboardAvoidingViewStyles}>
        {/* --- 修改的部分在这里 --- */}
        <View 
          style={styles.contentContainer}
          onStartShouldSetResponder={() => true}
          onMoveShouldSetResponder={() => true}
        >
        {/* --- 修改结束 --- */}
          <View style={styles.modalStretcher} />
          {withCloseButton && (
            <TouchableOpacity style={[GlobalStyle.alignmentCenter, styles.modalCloseButton]} onPress={onPressCloseButton}>
              <Images.svg.CrossIcon color={colors.primary} height={heightPixel(22)} />
            </TouchableOpacity>
          )}
          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false} contentContainerStyle={GlobalStyle.PB30}>
            {/* 内部的输入框、日期选择器等内容保持不变 */}
          </ScrollView>
          {/* 底部按钮区域保持不变 */}
        </View>
      </KeyboardAvoidingView>
    </TouchableWithoutFeedback>
  </Pressable>
</Modal>

你可以先测试这个修改，应该就能解决ScrollView只能在输入框上滚动的问题了，如果还有其他细节需要调整，比如关闭Modal的触发区域，可以再微调Pressable的样式或者响应逻辑。

内容来源于stack exchange