React Native 事件不起作用

Posted 2023-03-15

【中文标题】React Native 事件不起作用

【英文标题】：React Native events do not work

【发布时间】：2018-01-08 15:38:16

【问题描述】：

我有一个只显示一个按钮的简单反应组件：

<Button onPress=() => console.log("test") title="Button"/>

当我将此按钮放入使用react-native init 创建的项目中时，它按预期工作。

但是，我有一个现有项目，我手动将 React Native (0.51.0) 集成到其中（因为它不使用可可豆荚；我遵循本指南：https://medium.com/@joshyhargreaves/adding-react-native-to-existing-ios-project-without-cocoapods-6f1ee9106009）。

该项目似乎运行良好：UI 加载，当我点击按钮时提供视觉反馈。但是按钮onPress 事件没有被触发，因此它不会记录任何内容。

没有错误或警告（Class RCTCxxModule was not exported 除外，但忽略此似乎是安全的）。

我现在不知道我可以尝试什么或如何调试这个问题，而不是深入研究 Reacts 触摸处理代码。这是我尝试过的：

确保只有一个 RCTRootView，并且它是在主线程中创建的。 检查远程调试器中发生的任何可疑情况；一切看起来都很正常（没有抛出异常或记录警告）。 测试了一些其他应该触发事件的组件；例如，TouchableOpacity 也不起作用。 在超时后记录某些内容确实有效，因此似乎不会过早释放任何内容 检查 Metro 捆绑器报告的错误：它不打印任何内容

关于我需要做什么才能让我的按钮在我点击它时打印“测试”有什么想法吗？

【参考方案1】：

我认为您没有启用远程调试 JS 选项。如果你不需要打开 React Native Debug Menu Pressing (command / control) + D 或者如果你正在使用真实设备进行调试，请摇动你的设备。然后只需按下 Debug JS Remotely，它就会出现在 Google Chrome 中。然后检查并打开控制台。来了！

【讨论】：

这就是我所说的“检查远程调试器中发生的任何可疑事情”的意思。我确实激活了远程调试，设置了断点并单步执行了应用程序，但我没有看到代码有任何问题（因为几乎没有要调试的代码）。我确实设置了“捕获异常时暂停”复选标记，但没有任何区别。

尝试使用警报而不是 console.log 看看会发生什么？

我确实尝试过；没用。我 99.9% 确定该事件没有被调用；我尝试了 log 语句（应该是最简单的测试），调用一个带有另一个 console.log 和一个断点的函数（断点没有被命中，即使它们通常工作）并显示一个警报。它们都不起作用（但仅在我手动集成 React 的项目中）。

使用TouchableHighLight的onPress还是不行吗？

不，我没有找到一个带有工作事件的 UI 组件。

【参考方案2】：

由主机（您的计算机）和客户端（移动设备）之间的日期差异引起的这种螨虫

您可以通过运行adb shell "date" && date 来检查这一点 看看是否有差异。

如果有，请转到您的移动设备并关闭并重新打开 automatic date & time。

然后如前所述再次测试时间差异，如果没有更多差异，点击事件应该在调试模式下工作

更多详情见原文git issue answer by - Alex Ciarlillo