React Native自定义HapticButton如何合并vibrate与传入的onPress函数

你只需要在自定义HapticButton内部封装一个统一的点击处理方法，先触发vibrate震感逻辑，再执行外部传入的onPress方法即可，原有组件的调用方式完全不需要修改，无侵入性。

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

export default class HapticButton extends React.Component {
  // 箭头函数自动绑定当前组件实例this，无需额外绑定
  handlePress = (event) => {
    // 点击优先触发震感反馈
    this.vibrate();
    // 透传点击事件参数，执行外部传入的onPress方法（如果有传入）
    this.props.onPress?.(event);
  }

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

  vibrate() {
    // 此处保留你原有的震感反馈实现代码
  }
};

提示：如果你的项目编译环境不支持ES2020可选链语法，可将handlePress内的调用逻辑替换为普通的if判断即可：

handlePress = (event) => {
  this.vibrate();
  if (typeof this.props.onPress === 'function') {
    this.props.onPress(event);
  }
}

• 新增了统一的点击事件入口handlePress，使用箭头函数定义避免this指向问题，不需要额外在constructor中绑定this
• 点击时优先执行内部vibrate方法保证震感即时触发，再调用外部传入的onPress属性，同时透传原生点击事件参数给外部方法
• 所有原有props透传逻辑保持不变，已经写好的HapticButton调用代码不需要做任何改动即可生效
• 兼容没有传入onPress的使用场景，不会出现调用报错

内容的提问来源于stack exchange，提问作者Simon Degn