有没有一种方法可以在React Native中忽略文本上的触摸事件?

r1zk6ea1  于 2023-03-31  发布在  React
关注(0)|答案(6)|浏览(165)

我想实现浮动标签,为此我在TextInput上有一个Text组件。我想忽略Text上的所有触摸事件,以便它下面的TextInput获得所有事件。有什么方法可以做到这一点吗?在CSS中我们曾经有pointer-events: none,我不知道如何在React Native中做到这一点。

px9o7tmv

px9o7tmv1#

在react-native中,pointerEvents是一个prop,而不是样式。

<View pointerEvents="none" />
ogsagwnx

ogsagwnx2#

pointerEvents: 'none'添加到Text组件。这允许触摸事件转到组件的祖先,但不允许组件本身或其子组件。
React Native还支持'box-none',这允许触摸事件进入组件的祖先和子组件,并且只排除组件本身。

xoshrz7s

xoshrz7s3#

我遇到了和Cryszon一样的问题。在Android上,pointerEvents=“none”似乎不适用于文本组件。
将文本 Package 在视图中并将pointerEvents=“none”prop放在那里解决了这个问题。

xpcnnkqh

xpcnnkqh4#

pointerEvents只能在View上工作,不能在TextTouchableOpacity上工作。

e5nqia27

e5nqia275#

如果您遇到'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;
   }
}

有点黑,但很管用。

kyks70gy

kyks70gy6#

例如,当你想用一个自定义的输入模式覆盖一个react <TextInput>对象时,你可以这样做:

<TouchableOpacity
onPress={() => this.openSourceOptions()}
>
  <TextInput
  label={"InputBox"}
  editable={false}
  pointerEvents="none"
  value={somevalue}
  mode="outlined"
  />
</TouchableOpacity>

相关问题