功能性反应本机组件中的onPress不起作用答案

【问题标题】：onPress in functional react native component not working功能性反应本机组件中的onPress不起作用
【发布时间】：2020-08-02 16:30:46
【问题描述】：

我正在尝试在 react-native 中创建一个简单的可重用按钮组件，但由于某种原因，onPress 函数永远不会被调用。我发现的大多数线程只是立即调用该函数或声明错误我相信我的声明应该一切都很好，我也尝试了几种不同的形式但无济于事

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity="0.5" onPress={handleClick}>
      {(props.imageUrl)?<Image source={{uri: props.imageUrl}} style={{width: 32, height: 32}}/>:<Text>loading...</Text>}
      <Button title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}/>
    </TouchableOpacity>
  )
}

export default GameIcon;

console.log 从未被触发，我不知道为什么......我尝试将组件编写为功能游戏图标... 我在没有 TouchableOpacity 的情况下尝试了这个，只是在返回函数中有按钮......在实际设备和模拟器上都不起作用

小更新：

我把return函数的内容改成：

<TouchableOpacity activeOpacity={0.5} onPress={()=>console.log("HELLO")}>
  <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
</TouchableOpacity>

组件渲染时没有错误或任何东西，它可以被标签化并且不透明度正确更改但不调用 onPress（因此没有控制台日志）

这似乎并不仅限于功能组件...

我将 react-native 文档中的按钮示例 1:1 添加到我的主屏幕上，并且永远不会调用 onPress 事件：

<Button
  onPress={() => {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

【问题讨论】：

在 onPress 中调用 this.handleClick
@WahdatKashmiri 它的功能组件。 this 仅适用于类组件。
你的句柄点击有一些参数
尝试调用 handleClick 而不是引用它onPress={() => handleClick('argument')}
可能是按钮吞下了点击而不是被可触摸处理。

标签： reactjs react-native react-functional-component onpress

【解决方案1】：

请试试这个代码。

import React from 'react';
import { Text, Button, Image, TouchableOpacity } from 'react-native';
import { useHistory } from "react-router-native";
import { getFileUrl } from '../db/firebaseDb';
import styles from '../modules/Styles';

const GameIcon = (props) => {
  const history = useHistory();

  const handleClick = (pId) => {
    console.log("TEST");
    history.push("/game");
  }

  return (
    <TouchableOpacity activeOpacity={0.5} onPress={handleClick}>
    <Text title={props.game.id} key={props.game.id} color={props.color} style={styles.buttons}>{props.game.id}</Text>
    </TouchableOpacity>
  )
}

export default GameIcon;

【讨论】：

这是我正在使用的代码 - id 由于某种原因不起作用......或者更好的是它只在 Mac OS 更新后像昨天一样工作......它可能必须这样做有一些缓存什么的

【解决方案2】：

所以我有一些 macOS 更新待定，结果发现它们不知何故是造成这个的原因......我仍然不明白......这个应该独立于操作系统更新，对吧？无论如何... 15 分钟和很多重启后，现在都 onPress 功能正常工作 - 再次感谢所有尝试过的人帮忙！

更新：今天再次启动我的 Mac 并且同样的问题 - 它正在工作昨天一整天更新后，但今天完全相同的问题 - 所有按钮都响应被按下，没有按钮触发 onPress 功能

最终更新：我找到了原因：这是一个 react-native 错误，仅在调试模式下发生 - 在此处阅读更多信息： https://github.com/facebook/react-native/issues/28687

【讨论】：

【解决方案3】：

也可以是 react-native-gesture-handler

npm install --save react-native-gesture-handler

然后在 index.js 中先导入

import 'react-native-gesture-handler';

【讨论】：