3

我正在尝试在 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 的情况下尝试了这个，只是在返回函数中有按钮……在实际设备或模拟器

小更新：

我将返回函数的内容更改为：

<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 docs 1:1 中的按钮示例添加到我的主屏幕上，并且永远不会调用 onPress 事件：

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

3 回答 3

2

请尝试此代码。

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;
于 2020-04-20T10:20:52.643 回答
0

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

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

然后先在 index.js 中导入

import 'react-native-gesture-handler';
于 2020-10-30T19:30:37.387 回答
0

所以我有一些 macOS 更新待处理，结果以某种方式它们是造成这种情况的原因......我仍然不明白......这应该独立于操作系统更新，对吗？无论如何... 15 分钟后重新启动了很多次，现在这两个 onPress 功能都可以正常工作 - 再次感谢所有试图提供帮助的人！

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

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

于 2020-04-20T09:54:06.817 回答