我想实现浮动标签,为此我在TextInput上有一个Text组件。我想忽略Text上的所有触摸事件,以便它下面的TextInput获得所有事件。有什么方法可以做到这一点吗?在CSS中我们曾经有pointer-events: none,我不知道如何在React Native中做到这一点。
TextInput
Text
pointer-events: none
px9o7tmv1#
在react-native中,pointerEvents是一个prop,而不是样式。
<View pointerEvents="none" />
ogsagwnx2#
将pointerEvents: 'none'添加到Text组件。这允许触摸事件转到组件的祖先,但不允许组件本身或其子组件。React Native还支持'box-none',这允许触摸事件进入组件的祖先和子组件,并且只排除组件本身。
pointerEvents: 'none'
'box-none'
xoshrz7s3#
我遇到了和Cryszon一样的问题。在Android上,pointerEvents=“none”似乎不适用于文本组件。将文本 Package 在视图中并将pointerEvents=“none”prop放在那里解决了这个问题。
xpcnnkqh4#
pointerEvents只能在View上工作,不能在Text或TouchableOpacity上工作。
pointerEvents
View
TouchableOpacity
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; } }
有点黑,但很管用。
kyks70gy6#
例如,当你想用一个自定义的输入模式覆盖一个react <TextInput>对象时,你可以这样做:
<TextInput>
<TouchableOpacity onPress={() => this.openSourceOptions()} > <TextInput label={"InputBox"} editable={false} pointerEvents="none" value={somevalue} mode="outlined" /> </TouchableOpacity>
6条答案
按热度按时间px9o7tmv1#
在react-native中,pointerEvents是一个prop,而不是样式。
ogsagwnx2#
将
pointerEvents: 'none'
添加到Text
组件。这允许触摸事件转到组件的祖先,但不允许组件本身或其子组件。React Native还支持
'box-none'
,这允许触摸事件进入组件的祖先和子组件,并且只排除组件本身。xoshrz7s3#
我遇到了和Cryszon一样的问题。在Android上,pointerEvents=“none”似乎不适用于文本组件。
将文本 Package 在视图中并将pointerEvents=“none”prop放在那里解决了这个问题。
xpcnnkqh4#
pointerEvents
只能在View
上工作,不能在Text
或TouchableOpacity
上工作。e5nqia275#
如果您遇到
'box-none'
也不允许将触摸事件传递给子对象的问题,您可以执行以下操作有点黑,但很管用。
kyks70gy6#
例如,当你想用一个自定义的输入模式覆盖一个react
<TextInput>
对象时,你可以这样做: