React-Native中如何解决Pressable内部嵌套ScrollView的触摸冲突问题

问题根源 #

你的代码存在两个核心冲突导致ScrollView滚动失效：

• 外层CenterView和ModalContent均为Pressable组件，默认会拦截触摸事件，ScrollView的滚动事件被上层组件吞吃
• 点击Modal内部区域时，触摸事件会冒泡到外层CenterView的onPress，同时也干扰了ScrollView的事件响应
• ScrollView的contentContainerStyle配置了justifyContent: 'center'，当列表内容超出容器高度时会导致滚动逻辑异常

解决方案 #

按以下步骤修改即可同时满足「点击外部关闭Modal」和「内部列表正常滚动交互」的需求：

1. 给ModalContent组件添加事件拦截配置，阻止内部触摸事件冒泡到外层CenterView，同时禁止ModalContent本身拦截子元素的触摸事件
2. 删除ScrollView配置中contentContainerStyle的justifyContent: 'center'属性
3. 保证ScrollView的容器高度固定，内部内容高度超出容器即可正常滚动

修改后的关键代码 #

组件部分 #

return (
    <Container {...props}>
      <BottomModal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        <CenterView onPress={() => setModalVisible(!modalVisible)}>
          {/* 新增事件处理，阻止冒泡+不拦截子元素事件 */}
          <ModalContent 
            onPress={(e) => e.stopPropagation()}
            onStartShouldSetResponder={() => false}
          >
            <ModalHeader>
              <CloseButtonContainer>
                <Pressable onPress={() => setModalVisible(!modalVisible)}>
                  <CloseButton
                    name="times-circle"
                    type={vectorIconTypes.MEDIUM}
                  />
                </Pressable>
              </CloseButtonContainer>
              <TitleContainer>
                <TitleText>{title}</TitleText>
              </TitleContainer>
            </ModalHeader>
            <ModalList>
              <ScrollContainer>
                <LeftTextRightCheckBox>
                  <TitleText>Newest</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Points High to Low</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
                <LeftTextRightCheckBox>
                  <TitleText>Brands A to Z</TitleText>
                  <CheckBox />
                </LeftTextRightCheckBox>
              </ScrollContainer>
            </ModalList>
          </ModalContent>
        </CenterView>
      </BottomModal>
</Container>

样式部分 #

const Container = styled.View`
  flex-direction: column;
  background-color: white;
  padding: 10px;
`;

const BottomModal = styled.Modal`
  flex-direction: row;
  height: 100%;
`;

const CenterView = styled.Pressable`
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
`;

const ModalContent = styled.Pressable`
  flex-direction: column;
  background-color: white;
  width: 100%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding-bottom: 30px;
  height: 300px;
`;

const ModalHeader = styled.View`
  flex-direction: row;
  width: 100%;
  padding: 20px;
  height: 60px;
`;

const ModalList = styled(ScrollView).attrs(() => ({
  contentContainerStyle: {
    flexDirection: 'column',
    flexGrow: 1,
  },
  showsVerticalScrollIndicator: true,
  persistentScrollbar: true,
}))`
  border: solid pink 5px;
  width: 100%;
  height: 200px;
  padding: 10px;
`;

内容的提问来源于stack exchange，提问作者Ibrahim Noor Mohammed