登录📳 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(滑动列表时的阻尼感)
总结与建议
在实际项目中，这两种方案往往是共存的，而不是二选一：
- 涉及 UI 微交互（如点赞、开关 Switch、下拉刷新、展开菜单）：必须用 Haptic Feedback。
- 涉及系统级提醒（如新消息到来、重大错误、业务规定的高风险预警）：必须用原生 Vibration。
下次再遇到“加个震动”的需求，记得先问清楚：“是要提醒用户，还是要提升手感？” 答案决定了你的技术选型！
