react-native - TouchableOpacity 不起作用，因为它保留在另一个元素的 maskedView 下

Question

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

问题:我只能触摸/单击最后一张牌。所有卡片都保留在列表中下一张卡片的掩码下。因此，最后一张卡片 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>

卡片中的蒙版 View :

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(作为背景图片)位于最后面
• 在中间查看(包含文本数据)
• TouchableOpacity(用于导航详细信息页面)位于前面

第二张卡片的图像位于第一张卡片的前面，尽管它不可​​见。因此，第一张卡片的 TouchableOpacity 保留在后面且不可点击(在 iOS 上)。

Answer 1

我找到了解决方案。只需将 pointerEvents="none" 添加到 MaskedView Prop 就可以像魔术一样工作。它写在 docs 。谁知道呢，对吧。