如何在 React-Native 的 Pressable 中处理 ScrollView？ [复制]

Question

现在，我正在创建一个模态框，其中包含要滚动的项目。但是，我注意到触摸功能非常模糊并且没有适当地通过。使用当前的实现，在 ScrollView 上滚动不起作用。我只是想把这个滚动视图放在模态中，我已经设置了它，以便模态可以在内部按下，而模态的外部按下会导致它关闭。所以我需要传递适当的可触摸属性。

我正在查看的一些资源和以前的堆栈溢出页面是：

React-Native, Scroll View Not Scrolling

 return (
    <Container {...props}>
      <BottomModal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}>
        <CenterView onPress={() => setModalVisible(!modalVisible)}>
          <ModalContent>
            <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',
    justifyContent: 'center',
    flexGrow: 1,
  },
  showsVerticalScrollIndicator: true,
  persistentScrollbar: true,
}))`
  border: solid pink 5px;
  width: 100%;
  height: 200px;
  padding: 10px;
`;

Answer 1

我的问题在我的问题中的同一个链接中得到了完美的回答。所有功劳归于 freddrivett。

如果您的 ScrollView 在处理触摸的东西（Pressable， TouchableWithoutFeedback 等）然后您需要停止触摸 事件传播到该父处理程序或 ScrollView 不会处理触摸事件，因此不会滚动。

这可以通过 onStartShouldSetResponder={() => true} 或 通过将孩子包裹在一个本身处理触摸的元素中 事件（例如 Pressable）：

    <Pressable>
      <Text>This is scrollable</Text>
    <Pressable>
    <Pressable>
      <Text>As is this</Text>
    <Pressable>   </ScrollView> );