android - 反应本机 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>
);

score 148 · Accepted Answer

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

score 24 · Accepted Answer

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

score 16 · Accepted Answer

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

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

ctrl + c

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

react-native run-android

或者

npx react-native run-android

score 9 · Accepted Answer

对我来说，它可以工作，但可触摸区域非常小。不知何故，iOS 中的区域比 Android 中的要大。

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

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

score 8 · Accepted Answer

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

用这个

import { TouchableOpacity } from 'react-native';

而不是这个

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

score 7 · Accepted Answer

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

score 6 · Accepted Answer

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

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

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

score 4 · Accepted Answer

在某些情况下，原生调试器在 iOS 和 Android 平台上无法正常工作，我发现 TouchableOpacity 在启用调试器的 Android 上存在触摸错误。尝试禁用它，它会在构建后正常工作！

score 4 · Accepted Answer

遇到了同样的问题。检查您的设备时间是否与它连接的机器时间相同。在我的情况下，这是 1 分钟的差异，这导致每个 TouchableOpacity 都不起作用。

score 2 · Accepted Answer

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

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 中。这就是为什么我自己制作一个带有图标填充的父视图。其他人也提到的其他东西是 postion:'absolute' 道具，它与 Component 体积混淆。

score 2 · Accepted Answer

对我来说，我使用的是 NativeBase 并具有以下结构，这在 Android 上是中断的：

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

一旦我删除了ListItem并且只是使文本成为的直接子级TouchableOpacity，那么它就起作用了。

score 2 · Accepted Answer

2

对我来说，从所有父级中删除“flex:1”是可行的。

于 2021-01-14T10:22:31.967 回答

score 2 · Accepted Answer

我忘记遵循 react-native-gesture-handler 的 Android 入门步骤：

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

score 1 · Accepted Answer

我的问题没有在这里列出，所以想添加它。

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

一旦我将 KeyboardAvoidingView 的范围限定为仅围绕输入字段而不是我的 TouchableOpacities，它就会再次开始工作。

（顺便说一句，在IOS上很好）

score 1 · Accepted Answer

对我来说，问题是媒体没有在TouchableWithoutFeedBack. 进口react-native-gesture-handler或react-native没有任何区别。

TouchableOpacity为了解决它，我从中导入'react-native'并使用它，而不是使用activeOpacity={1}它来防止按下时改变不透明度。这给了我的行为，TouchableWithoutFeedback但它适用于 Android。

实际上我将其更改为 aPressable并且它也有效

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer


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

zIndex: 1 就像魔术一样工作。

score 1 · Accepted Answer

TouchableOpacity 默认从“react-native-gesture-handler”包自动导入。这个版本不能在安卓上正常运行。

score 1 · Accepted Answer

有同样的问题 - 在我的例子中，它是一个在内部渲染的元素TouchableOpacity，position: 'absolute'并且与成比例TouchableOpacity，我已经添加zIndex: 0到这个元素中使其工作。

score 0 · Accepted Answer

尽管以下问题是由最近发布的 React Native 引起的，但我认为这可能是最近遇到此问题的人的解决方案。

这可能是由于使用调试模式时设备上的时间与开发机器上的时间不匹配造成的。我通过关闭和打开设备的自动时间设置来解决此问题，这会“重新获取”时间，使其与我的开发机器同步。

这个问题与此相关：

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

score 0 · Accepted Answer

0

尝试使用 onPressIn 而不是 onPress。为我工作

于 2022-01-18T11:59:17.223 回答

score 0 · Accepted Answer

我尝试了所有其他答案，但无法正常工作。就我而言，我有一个具有以下样式的父容器：

.parentContainer {
    height: '100%',
    width: '100%',
    position: 'absolute',
    top: '-20%'
}

我意识到孩子们从父容器中溢出，虽然在样式方面这不是一个大问题，但是所有从父容器中溢出的 TouchableOpacity 组件都不起作用（onPress 事件没有触发）。基本上任何位于屏幕底部 20% 的 TouchableOpacity 组件都不起作用，因为父级已向上移动 20%（顶部：'-20%'）。我所要做的就是将父容器的高度从更改100%为120%，它开始按预期工作。

score 0 · Accepted Answer

如果这对任何人有帮助，

旧代码

<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 解决了这个问题。

android - 反应本机 TouchableOpacity onPress 在 Android 上不起作用

23 回答 23

Related

Reference