反应原生 TouchableOpacity onPress 不适用于 Android

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

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

Answer 2

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

Answer 3

终止Metro 服务器（如果它当前正在运行）然后再次运行它（如下所示）对我有用。

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

ctrl + c

然后在另一个控制台上，运行您的应用程序

react-native run-android

或者

npx react-native run-android

Answer 4

检查长时间按 Touchable 是否有效。就我而言，我正在 Android 手机上进行测试，并且多次渲染会TouchableOpacity减慢手机的速度，如果我太短暂地触摸该组件，它就不会注册为有效的按下。

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

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

Answer 5

TouchableOpacity 默认从“react-native-gesture-handler”包自动导入。该版本在安卓上无法正常运行。

Answer 6

我也遇到了同样的问题，我只需将 TouchableOpacity 的导入从“react-native-gesture-handler”更改为“react-native”，就解决了问题。

Answer 7

对我来说，它是有效的，但可触摸区域非常小。不知何故，iOS 中的区域比 Android 中更大。

我最终使用以下hitSlop属性增加了可触摸区域：

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

Answer 8

使用 Expo SDK 42.0.0 遇到了同样的问题

从 切换onPress到onPressIn并有效。

onPressIn={() => {console.log('press!')}

Answer 9

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

Answer 10

Check the library you are importing touchable Opacity from. Import it from "react-native". not from "react-native-gesture-handler"

Use this

import { TouchableOpacity } from 'react-native';

instead of this

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