React Native Button onPress 在 iOS 设备上触发两次，但在 Android 上没有

Posted 2023-04-18

【中文标题】React Native Button onPress 在 iOS 设备上触发两次，但在 Android 上没有

【英文标题】：React Native Button onPress firing twice on iOS device, but not on Android

【发布时间】：2020-01-22 21:41:11

【问题描述】：

当我在 ios 设备上按下我的应用程序中的按钮时，我的控制台输出显示以下内容：

2019-09-22 13:45:25.116 [info][tid:com.facebook.react.javascript] 你点击了按钮

2019-09-22 13:45:25.116323-0400 AwesomeProject[5368:2651835] 你点击了按钮

我在 onPressButton 函数内将“您点击了按钮”记录到控制台，每次按下按钮都会调用两次。

这是我完整的 App.js 文件，它是来自：https://facebook.github.io/react-native/docs/handling-touches:

import React,  Component  from 'react';
import  Button, StyleSheet, View  from 'react-native';

export default class ButtonBasics extends Component 
  _onPressButton() 
    console.log('You tapped the button once!')
    alert('You tapped the button!')
  

  render() 
    return (
      <View style=styles.container>
          <View style=styles.buttonContainer>
           <Button
             onPress=this._onPressButton
             title="Press Me"
            />
         </View>
        <View style=styles.buttonContainer>
          <Button
             onPress=this._onPressButton
            title="Press Me"
            color="#841584"
           />
         </View>
        <View style=styles.alternativeLayoutButtonContainer>
           <Button
            onPress=this._onPressButton
            title="This looks great!"
           />
           <Button
            onPress=this._onPressButton
            title="OK!"
            color="#841584"
           />
        </View>
       </View>
     );
   


 const styles = StyleSheet.create(
   container: 
   flex: 1,
   justifyContent: 'center',
  ,
  buttonContainer: 
     margin: 20
   ,
   alternativeLayoutButtonContainer: 
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
   
 );

我真的不知道为什么 onPressButton 在 iOS 上会触发两次，但在 android 上却没有。

【问题讨论】：

您的 onPressButton 函数是在您尝试使用它的实际组件内定义的，但在您将其作为道具调用的组件之外。这可能会引发奇怪的行为。为什么不在父组件中定义onPressButton，作为prop传递呢？

感谢您的回复！我刚刚学习 React Native，并按照此处显示的 Facebook 提供的示例进行操作：facebook.github.io/react-native/docs/handling-touches您的建议让我有些困惑。你能举例说明你的意思吗？

如果没有完整的代码，我就忍不住了，因为不清楚实际发生了什么。示例链接完全没问题。有什么理由不能完全匹配吗？我会说使用当前安装在屏幕及其子组件上的视图的完整源更新您的初始帖子。

按要求添加了整个 App.js。这是来自facebook.github.io/react-native/docs/handling-touches 的精确副本。我唯一添加的是 concole.log 行。在 iOS 上仍然触发两次，在 android 上只触发一次。

【参考方案1】：

用箭头函数试试

例子：-

onPress = () => this.onPressButton() //in Button

onPressButton = () =>                 //onPressButton function
 console.log('You tapped the button');

【讨论】：

这就是没有构造函数的函数绑定的工作原理

是的，ES6 的特性之一。

不确定这种语法。我列出的代码是facebook给出的示例代码。

你实现了没有？带箭头功能。

他的代码没有问题，直接来自 react 原生网站。

【参考方案2】：

https://snack.expo.io/r1OTvkEdS

如果您看一下小吃，您会发现它既没有记录也没有发出两次警报。 javascript bundler 可能与模拟器分开记录。这就是为什么在第一个日志上您会看到标记 [tid:com.facebook.react.JavaScript] 但在另一个日志上您会看到不同的标记。这是两个单独的接口记录相同的事情。你用什么来查看日志？您应该使用终端或 react 调试工具。

TLDR：它没有触发两次，只是两个独立的记录器在做同样的工作。