在 React Native 应用程序中向传递的 this.props.onPress-函数添加函数

Question

我已将所有 TouchableOpacity 组件更改为自定义组件，因此我可以为应用程序中的所有按钮/可点击视图添加通用功能。我将新组件命名为 HapticButton.

所有 HapticButton 组件都将包含 onPress 属性，如下所示：

<HapticButton activeOpacity={1.0} onPress={() => { console.log("button was pressed"); }}>...</HapticButton>

我的 HapticButton-class 看起来像这样：

import React from 'react';
import { TouchableOpacity, Text} from 'react-native';


export default class HapticButton extends React.Component {

    render() {
        return (
            <TouchableOpacity activeOpacity={this.props.activeOpacity} style={[this.props.style]}  onPress={this.props.onPress}>
                    {this.props.children}
            </TouchableOpacity>
        );
    }

    vibrate() {
        // Code that makes a haptic feedback when called
    }
};

我成功地将 onPress-属性传递给我的新 HapticButton-组件，但是如何将 this.props.onPress-[=31= 合并在一起] 与 vibrate() 函数，以便每次按下 HapticButton 时都会调用它？

Answer 1

您可以轻松地将两个函数调用合并在一起，如下所示

<TouchableOpacity onPress={() => {
  this.props.onPress();
  this.vibrate();
}}>

或者你可以在vibrate函数中直接调用this.props.onPress()

  <TouchableOpacity onPress={this.vibrate} ...

    vibrate() {
      this.props.onPress();
        // Code that makes a haptic feedback when called
    }

根据您的用例，我分享的两种方式之间没有太大差异，在可读性方面我认为第一种方式更好

在 React Native 应用程序中向传递的 this.props.onPress-函数添加函数

Adding a function to the passed this.props.onPress-function in a React Native app

react-native

touchableopacity

react-props