包裹在 Pressable 中的 react-native-swiper 在 iOS 上无法正常工作答案

【问题标题】：react-native-swiper wrapped in a Pressable not working properly on iOS包裹在 Pressable 中的 react-native-swiper 在 iOS 上无法正常工作
【发布时间】：2021-04-06 15:59:36
【问题描述】：

我正在使用 react-native-swiper 来显示图像，并且我想将整个 swiper 包裹在 Pressable 中，并且由于会有多个，它们都嵌套在 FlatList 中，这就是它看起来像在代码中：

<FlatList
      data={locations}
      renderItem={(props) => <Location {...props} />}
      style={styles.flatList}
      scrollEventThrottle={16}
      refreshControl={refreshControl}
      ListEmptyComponent={ListEmptyComponent}
      contentInset={contentInset}
      onScroll={onScroll}
      contentContainerStyle={contentContainerStyle}
    />

FlatList 呈现 Location 组件，该组件返回以下内容：

    <Pressable
      style={{
        position: "relative",
        width: IMAGE_SIZE,
        height: IMAGE_SIZE,
      }}
      onPress={() => console.log(id, " ,pressed")}
    >
      <Swiper
        style={styles.swiper}
        loop={false}
        renderPagination={renderPagination}
      >
        {media.map((image) => (
          <Image
            key={image.id}
            source={{ uri: image.url }}
            style={{
              width: IMAGE_SIZE,
              height: IMAGE_SIZE,
            }}
          />
        ))}
      </Swiper>
    </Pressable>

当我尝试在图像上滑动时，它只是不断触发 Pressables onPress 函数并且不想滑动到下一张图像。它可以在 Android 上按预期工作。

当我用普通的 View 组件替换 Pressable 时，一切正常。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

与此同时，我还为该组件添加了一个标题，这使事情变得有些复杂，但我设法通过使用 2 个不同的 Pressable 组件使其工作。不幸的是，这消除了在图像转换时单击组件的能力，但它可以工作。

【讨论】：