React Native：你能把一个项目放在另一个项目前面，但后面的项目仍然可以点击吗？

编程问答 2022-04-28

问题描述

在我的 React Native 应用程序中，我有一个父元素，其中包含两个子元素，一个 // Kotlin sample LiveAdapter( data = livelistofItems,lifecycleOwner = this@MainActivity,variable = BR.item ) .map<Header,ItemHeaderBinding>(R.layout.item_header) { onBind{ } onClick{ } areContentsTheSame { old: Header,new: Header -> return@areContentsTheSame old.text == new.text } areItemSame { old: Header,new: Header -> return@areContentsTheSame old.text == new.text } } .map<Point,ItemPointBinding>(R.layout.item_point) { onBind{ } onClick{ } areContentsTheSame { old: Point,new: Point -> return@areContentsTheSame old.id == new.id } areItemSame { old: Header,new: Header -> return@areContentsTheSame old.text == new.text } } .into(recyclerview) 和一个 <Text>。我希望 <TouchableOpacity> 位于 <Text> 的前面，但是当用户点击可见元素时点击 <TouchableOpacity>。实际情况比这更复杂，因此我不会寻找明显的替代方案，例如将 <TouchableOpacity> 放在 <TouchableOpacity> 前面。我只是想知道这是否可能。

<Text>

解决方法

是的，您可以将一个布局放置在另一个之上，并且可以使用 Prop pointerEvents

控制后面的布局是否可以成为触摸事件的目标

以下是您的代码片段示例：

<View>
  <TouchableOpacity
    onPress={onPressHandler}
    style={{backgroundColor: 'green',height: 50,width: '100%'}}
  />
  <View
    pointerEvents="none" // The Text View is never the target of touch events.
    style={{
      position: 'absolute',width: '100%',height: 40,}}>
    <Text>hello</Text>
  </View>
</View>

有关 pointerEvents 的更多详细信息：here

react-nativereact-nativetouchableopacitytouchableopacity