TouchableOpacity 不起作用，因为它停留在另一个元素的 maskedView 下

Question

我有一张卡片清单。每张卡片都有一个蒙版图像作为背景图像，并在其上方 TouchableOpacity。

问题：我只能touch/click最后一张牌。所有卡片都在列表中下一张卡片的掩码下。所以最后一张卡片 TouchableOpacity 保持在顶部并有效。

问题仅出现在 IOS 上。我可以与 Android（模拟器和设备）上的所有卡片进行交互。

卡片列表代码：

  <ScrollView style={styles.paddingBottom}>
  {props.jsonArray.map((item) => (
    <View style={styles.cardContainer} key={item.ar_id}>
      <Card 
        item={item} 
        listData={listData} 
        groupsArray={props.groupsArray} 
        setGroupsArray={props.setGroupsArray} 
        navigation={props.navigation}
        parameters={props.parameters}
        filterOptions={props.filterOptions} 
        costBoxWidth={costBoxWidth} 
        thumbnailWidth={thumbnailWidth} 
        mrRght={mrRght} 
        adInfoBase={adInfoBase} 
        adInfoWidth={adInfoWidth} 
        additional={additional} 
        cardWidth={cardWidth} 
      />
    </View>
  ))}
  </ScrollView>

卡片中的屏蔽视图：

import MaskedView from '@react-native-masked-view/masked-view';

...

<MaskedView 
  style={styles.maskedView}
  maskElement={<View style={styles.opening} />}
  androidRenderingMode="software" 
>
  <View style={[ styles.sceneryContainer, {width: props.cardWidth} ]}>
    <Image source={sourceC} style={[ styles.rightImageSingle, { left: rightSingleImageLeft, top: rightSingleImageTop, width: rightSingleImageW } ]} />
    <Image style={styles.leftImage} source={sourceB} />
  </View>
</MaskedView>

<View style={[ styles.adInfoBox, {width: props.adInfoWidth, paddingLeft: props.mrRght} ]}>  ... some text ...  </View>

<TouchableOpacity style={{flex: 1}} onPress={() => {Linking.openURL(props.item["es_link"])}} />

蓝色矩形是图像的边框。它们比卡片大。所以我用了MaskedView.

卡片中的zIndex顺序：

MaskedView（作为背景图片）在最后面
View（包含文本数据）在中间
TouchableOpacity（导航详情页面）在前面

第二张卡片的图像出现在第一张卡片的前面，即使它不可见。所以第一张卡片的 TouchableOpacity 留在后面并且不可点击（iOS）。

Answer 1

我找到了解决方案。只需将 pointerEvents="none" 添加到 MaskedView 道具就像变魔术一样。它写在 docs 中。谁知道，对吧。

TouchableOpacity 不起作用，因为它停留在另一个元素的 maskedView 下

TouchableOpacity does not work because it stays under another element's maskedView

react-native