📳 React Native 震动指南：Haptic Feedback vs 原生 Vibration 到底怎么选？

📳 React Native 震动指南：Haptic Feedback vs 原生 Vibration 到底怎么选？

在 React Native 开发中，当我们接到"App 需要加点震动反馈"的需求时，通常会面临两个选择：使用 RN 自带的 Vibration API，还是引入第三方库 react-native-haptic-feedback？

很多开发者（包括产品经理和老板）对这两者的区别并没有清晰的概念，导致做出来的效果要么"震得手麻"，要么"根本感觉不到"。

本文将从使用场景 、硬件原理 和代码实现三个维度，深度对比这两种震动方案。

---

🛠 核心区别速览

维度	Vibration (RN 原生)	react-native-haptic-feedback (第三方)
底层硬件	传统转子马达 / 线性马达的强震动模式	iOS Taptic Engine / Android 线性马达触觉模式
震动体感	强烈、持久、粗糙（放在桌上会有明显的"嗡嗡"声）	细腻、短促、清脆（模拟真实的物理按键质感）
使用场景	强提醒、高风险警告、来电、闹钟	UI 交互、点赞、列表滚动阻尼感、下拉刷新
控制维度	只能控制震动的时间长度和频率节奏	只能控制震动的类型（轻击、重击、成功、错误）
依赖安装	无需安装，React Native 自带	需要 yarn add 并进行 pod install

---

场景一：老板说"遇到高风险操作，给我狠狠地警告用户！" 🚨

首选方案：React Native 原生 Vibration API

当你需要引起用户的强力注意，比如应用内收到紧急工单、监控报警、或者像文章开头提到的"高风险提示"时，你需要的是传统的大震动。这种震动甚至在手机放在桌面上时，都能发出物理共振的声音。

代码实现：持续的警报震动

原生 Vibration 最强大的地方在于支持传入一个 Pattern（节奏数组），并且可以无限循环。

import { Vibration, Platform, Button } from 'react-native';

// 触发高风险警报
const triggerAlert = () => {
  // Pattern 数组: [等待时间, 震动时间, 等待时间, 震动时间...]
  const pattern = Platform.OS === 'android' 
    ? [0, 1000, 500] // Android: 立即开始，震1秒，停0.5秒，不断循环
    : [0, 1000];     // iOS: 系统会按固定时长重复震动
  
  // 第二个参数 true 表示开启无限循环
  Vibration.vibrate(pattern, true);
};

// 停止震动（必须手动调用，否则会一直震）
const stopAlert = () => {
  Vibration.cancel();
};

⚠️ 避坑指南：

• iOS 平台对单次 Vibration.vibrate() 的时长参数是直接忽略的，固定只震动 400ms 左右。要实现长震动，必须使用 Pattern 数组。
• 连续震动非常耗电且容易引起用户反感，务必提供明确的停止机制（如点击确认按钮后调用 Vibration.cancel()）。

---

场景二：产品经理说"点赞按钮要像真实弹簧按键一样有手感" ✨

首选方案：react-native-haptic-feedback

如果你的需求是提升 App 的质感和高级感 ，比如点赞时的心跳感、滑动选择器时的齿轮滴答感、或者密码输入错误的轻微抖动，那么原生的 Vibration 绝对不能用，因为它会震得用户手麻。

此时必须使用 react-native-haptic-feedback，它调用的是 iOS 昂贵的 Taptic Engine 和 Android 的高级马达 API。

代码实现：细腻的 UI 触觉反馈

首先需要安装库：

yarn add react-native-haptic-feedback
cd ios && pod install

然后在代码中调用特定的"质感类型"：

import ReactNativeHapticFeedback from 'react-native-haptic-feedback';

const options = {
  enableVibrateFallback: true, // 如果设备不支持触觉反馈，退级为普通震动
  ignoreAndroidSystemSettings: false, // 尊重用户的系统震动设置
};

// 场景 A：普通按钮点击（清脆）
const onLightPress = () => {
  ReactNativeHapticFeedback.trigger('impactLight', options);
};

// 场景 B：操作成功提示（带有特定的成功节奏）
const onSuccess = () => {
  ReactNativeHapticFeedback.trigger('notificationSuccess', options);
};

// 场景 C：表单输入错误提示
const onError = () => {
  ReactNativeHapticFeedback.trigger('notificationError', options);
};

支持的常用类型有：

• 交互类 : impactLight, impactMedium, impactHeavy, rigid, soft
• 通知类 : notificationSuccess, notificationWarning, notificationError
• 其他 : selection (滑动列表时的阻尼感)

---

总结与建议

在实际项目中，这两种方案往往是共存的，而不是二选一：

1. 涉及 UI 微交互 （如点赞、开关 Switch、下拉刷新、展开菜单）：必须用 Haptic Feedback。
2. 涉及系统级提醒 （如新消息到来、重大错误、业务规定的高风险预警）：必须用原生 Vibration。

下次再遇到"加个震动"的需求，记得先问清楚："是要提醒用户，还是要提升手感？" 答案决定了你的技术选型！