有没有办法可以忽略 React Native 中 Text 上的触摸事件？答案

【问题标题】：Is there a way in which I can ignore touch events on Text in React Native?有没有办法可以忽略 React Native 中 Text 上的触摸事件？
【发布时间】：2015-07-14 11:41:14
【问题描述】：

我想实现浮动标签，为此我在 TextInput 上方有一个文本组件。我想忽略 Text 上的所有触摸事件，以便它下的 TextInput 获取所有事件。有没有办法我可以做到这一点？在 CSS 中，我们曾经没有指针事件，我不知道如何在 react native 中做到这一点。

【问题讨论】：

向我们展示您目前拥有的东西会很有帮助。
我正在尝试构建类似codepen.io/soulrider911/pen/ugnyl
如果有人在 normal React（not React Native）中寻找解决方案，您只需将 css 设置为 pointer-events: none 即可您希望点击通过的元素。

标签： react-native

【解决方案1】：

在 react-native 中，pointerEvents is a prop，不是样式。

    <View pointerEvents="none" />

【讨论】：

如果以这种方式设置似乎可以工作<View pointerEvents={'none'} />
在某些情况下，您可能希望子视图仍然是触摸的目标，因此 pointerEvents={'box-none'} 将是合适的解决方案：facebook.github.io/react-native/docs/view.html#pointerevents

【解决方案2】：

将pointerEvents: 'none' 添加到Text 组件。这允许触摸事件到达组件的祖先，而不是组件本身或其子级。

React Native 还支持'box-none'，允许触摸事件到达组件的祖先和子组件，并且只排除组件本身。

【讨论】：

由于某种原因，我无法让它在 Text 组件上工作，但是将 Text 包装在 View 中并将 pointerEvents="none" 道具放在那里解决了它。跨度>

【解决方案3】：

我和 Cryszon 有同样的问题。在 Android 上似乎 pointerEvents="none" 不适用于文本组件。

将文本包装在视图中并将 pointerEvents="none" 道具放在那里解决了它。

【讨论】：

【解决方案4】：

pointerEvents 仅适用于 View，不适用于 Text 或 TouchableOpacity。

【讨论】：

【解决方案5】：

如果你有一个问题，即使'box-none' 也不允许触摸事件传递给孩子，你可以这样做

let setPointerEvents = 'none';
...
<View pointerEvents={setPointerEvents}>
   ...
   <TouchableOpacity onPress= {()=>this.set(false)}/>

</View>
<TouchableOpacity onPress= {()=>this.set(true)}/>
...
set(bool){
    switch(bool){
      case true:
        setPointerEvents= 'auto'
        break;
      case false:
        setPointerEvents= 'none'
        break;
   }
}

有点小技巧，但它确实有效。

【讨论】：