Question

我试图在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从未触发，我也不知道为什么……我尝试将组件编写为功能GameIcon ... 我在没有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（因此没有控制台日志）

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

我将本机docs 1：1中的按钮示例添加到了主屏幕上，并且从未调用过onPress事件：

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

Answer 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;

Answer 2

可能是该按钮吞下了点击，而不是由可触摸的按钮处理。

Answer 3

所以我有一些macOS更新正在等待中，事实证明它们以某种方式是造成这种情况的原因...我怎么仍然不明白...这应该独立于操作系统更新，对吗？无论如何... 15分钟后，大量重新启动，现在都在按功能可以正常工作-再次感谢所有尝试帮助！

更新：今天又重新启动了我的Mac，出现了同样的问题-它正在运行更新后昨天整天整天，但今天完全一样。所有按钮响应被按下，没有按钮触发onPress 功能

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

Answer 4

它也可能是react-native-gesture-handler

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

然后首先导入index.js

import 'react-native-gesture-handler';

功能上的onPress响应本机组件不起作用

4 个答案: