Question

TouchabelOpacity在iOS上可以正常使用，但是onPress方法对我而言不适用于Android。

我的本机版本：0.57.4

我的代码：

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);

Answer 1

对我来说，它正在工作，但是可触摸的区域很小。在某种程度上，iOS中的区域大于Android中的区域。

我最终使用hitSlop属性增加了可触摸区域，如下所示：

<TouchableOpacity
    onPress={() => {}}
    hitSlop={{ top: 30, bottom: 30, left: 30, right: 30 }}
>
    <Icon name="eye" />
</TouchableOpacity>

Answer 2

终止城域服务器（如果正在运行），然后再次运行（如下面所示），对我来说都是有效的。

在运行Metro服务器的控制台上，

使用

终止它

ctrl + c

然后在另一个控制台上，使用

运行您的应用

react-native run-android

或

npx react-native run-android

Answer 3

遇到同样的问题。检查您的设备时间是否与所连接的机器相同。在我的情况下，相差1分钟，导致每个TouchableOpacity无法正常工作。

Answer 4

对我来说，我正在使用NativeBase并具有以下结构，该结构在Android上已中断：

<List>
    <TouchableOpacity>
       <ListItem>
          <Text>Button</Text>
       </ListItem>
    </TouchableOpacity>
</List>

一旦我删除了ListItem，并将文本设为TouchableOpacity的直接子代，那么它就起作用了。

Answer 5

将图标包装在这样的视图中。

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <View style={{padding:5}}>
        <Ionicons name="ios-menu" color="white" size={30} />
    </View>
  </TouchableOpacity>
);

然后，如果问题仍然存在，请使用backgroundColor设置图标样式，然后您会看到一半的图标未使用backgroundColor设置样式，因此必须给填充物更大的填充量。我不知道，但是图标在音量方面往往会有问题，尤其是在TouchableOpacity中。这就是为什么我自己使用带有图标填充的父视图。其他人还提到的另一件事是位置：“绝对”道具，它与Component体积混淆。

Answer 6

在某些情况下，本机调试器无法在iOS和Android平台上正常运行，我发现TouchableOpacity在启用了调试器的Android上存在触摸错误。尝试禁用此功能，构建后即可正常使用！

Answer 7

在我的情况下，我从“ react-native-gesture-handler”导入了TouchableOpacity 在我从“ react-native”中添加它后，它起作用了

Answer 8

检查您要从中导入可触摸不透明度的库。从“react-native”导入。不是来自“react-native-gesture-handler”

使用这个

import { TouchableOpacity } from 'react-native';

代替这个

import { TouchableOpacity } from 'react-native-gesture-handler';

Answer 9

我忘了按照react-native-gesture-handler的Android入门步骤进行操作：

https://docs.swmansion.com/react-native-gesture-handler/docs/#android

Answer 10

我的问题未在此处列出，因此想添加它。

在Android上，如果您在KeyboardAvoidingView内部具有TouchableOpacity，则它将不起作用（至少使用我使用的设置）。

一旦我将KeyboardAvoidingView的范围设置为仅在输入字段周围，而不是在我的TouchableOpacities周围，它便再次开始工作。

（IOS btw很好）

Answer 11

有同样的问题 - 在我的例子中，它是在 TouchableOpacity 内呈现的一个元素，带有 position: 'absolute' 并且与 TouchableOpacity 成正比，我已经将 zIndex: 0 添加到这个元素让它发挥作用。

Answer 12

对我来说，从所有父工作中删除“flex:1”。

Answer 13


<TouchableOpacity
       style={{backgroundColor: 'red', width: 50, height: 50, zIndex: 1}}
       onPress={() => alert('working')}>
       <Text>tset</Text>
 </TouchableOpacity>

zIndex：1 像魔术一样工作。

Answer 14

如果这对任何人有帮助，

旧代码

<TouchableOpacity onPress={()=>{callback()}} >
   <View style={styles.action}>
      <MaterialCommunityIcons name="close-thick" size={25} color={colors.white} style={styles.icon}/>
   </View>
</TouchableOpacity>

修复

<TouchableOpacity onPress={()=>{callback()}} style={styles.action}>
   <View style={{flex:1}}>
      <MaterialCommunityIcons name="close-thick" size={25} color={colors.white} style={styles.icon}/>
   </View>
</TouchableOpacity>

就我在 android 上的情况而言，TouchableOpacity 从其中的视图（具有绝对位置）呈现（这是预期的，因为位置不是绝对的）。将 borderWidth 和 borderColor 添加到 TouchableOpacity 表明它是在远离视图的地方渲染的。将样式从子视图切换到 TouchableOpacity 解决了该问题。

Answer 15

我遇到了同样的问题，所有TouchableOpacity按钮在iOS版本中都可以正常工作，但是Android中有一个按钮没有触发。我偶然发现了这个answer here，其中提到position: absolute会弄乱触发器。它解决了我的问题。

Answer 16

检查长按 Touchable 是否有效。就我而言，我在 Android 手机上进行测试，渲染多个 TouchableOpacity 会降低手机速度，如果我触摸组件太短，它就不会注册为有效新闻。

根据onPress上的官方文档，它会取消无效按下： https://reactnative.dev/docs/touchablewithoutfeedback#onpress

在这种情况下，您可以使用 onPressOut 或 onPressIn 代替 onPress 以确保您的触摸始终有效。

Answer 17

如果您使用绝对位置。使用 zIndex 为 TouchableOpacity 注册点击次数

touchableOpacity: {
alignItems: 'center',
justifyContent: 'center',
width: 30,
height: 25,
zIndex: 1,
position: 'absolute',
left: 5},

Answer 18

尽管以下问题是由React Native的最新版本引起的，但我认为这可能是最近解决此问题的人们的一个解决方法。

这可能是由于使用 debug模式时设备上的时间与开发计算机上的时间不匹配引起的。我通过打开和关闭设备的自动时间设置来解决此问题，该设置“重新提取”了导致其与开发机同步的时间。

此问题与此相关：

https://github.com/facebook/react-native/issues/27008

Answer 19

我有类似的问题。请注意从何处导入“ TouchableOpacity”。当我将“ TouchableOpacity”从“ react-native-gesture-handler”更改为“ react-native”时，它对我有用（对于Android平台）

反应原生TouchableOpacity onPress在Android上不起作用

19 个答案: