目录

二、基础核心：Vibration 模块快速上手

2.1 核心第一步：导入 Vibration 模块

2.2 Vibration 核心 API 详解（鸿蒙端全支持，仅 2 个核心 API）

API 1：触发设备震动（核心主力）- Vibration.vibrate ()

API 2：立即取消震动 - Vibration.cancel ()

2.3 鸿蒙端震动强度与时长的对应关系

三、实战核心：鸿蒙端 4 个高频震动场景完整实战

核心前置说明

场景一：基础单次震动

场景二：多段式间歇震动

 场景三：无限重复震动 + 手动取消震动

 场景四：业务综合实战 - 表单操作差异化震动反馈

四、鸿蒙端专属适配要点 & 开发注意事项

✅ 核心适配要点

二、基础核心：Vibration 模块快速上手

2.1 核心第一步：导入 Vibration 模块

Vibration 是 RN 内置模块，无需安装依赖，一行代码直接导入，这是所有震动功能的基础，固定写法，无需修改：

import { Vibration } from 'react-native';

2.2 Vibration 核心 API 详解（鸿蒙端全支持，仅 2 个核心 API）

Vibration 模块的设计极其轻量化，核心可用 API 仅 2 个，无冗余方法，所有鸿蒙端的震动需求都基于这 2 个 API 实现，0 基础也能一次记牢，这是本文的核心知识点，重中之重：

API 1：触发设备震动（核心主力）- Vibration.vibrate ()
// 写法1：默认震动（鸿蒙端默认 400ms 轻震，最常用）
Vibration.vibrate();

// 写法2：自定义单次震动时长（推荐，控制强度/时长核心）
Vibration.vibrate(时长数值); // 单位：毫秒(ms)

// 写法3：多段式间歇震动（高级用法，自定义 震动-暂停 循环）
Vibration.vibrate([震1时长, 停1时长, 震2时长, 停2时长...], 是否重复);

// 写法4：无限重复震动（配合取消震动使用）
Vibration.vibrate([300, 200, 500], true);

参数说明（鸿蒙端适配版）

  1. 时长数值：Number 类型，单位ms，鸿蒙端推荐取值 50-2000ms，50ms = 极轻微震，2000ms = 强震，按需配置即可；
  2. 数组参数：数组内为「震动时长、暂停时长」交替排列，例如 [300,100,500] = 震动 300ms → 暂停 100ms → 震动 500ms；
  3. 是否重复：Boolean 类型，true= 无限循环执行数组内的震动逻辑，false= 只执行一次（默认值）。
API 2：立即取消震动 - Vibration.cancel ()
Vibration.cancel();

核心作用：手动终止当前正在执行的所有震动，包括「单次长震、多段式震动、无限重复震动」，调用后设备立即停止震动，无任何延迟。高频使用场景：无限重复震动时，点击「停止」按钮取消；页面跳转时，取消当前页面的未完成震动；用户主动关闭弹窗时，终止提醒震动。

2.3 鸿蒙端震动强度与时长的对应关系

这是鸿蒙端开发的「实战经验值」，也是控制震动强度的核心技巧，无需配置任何强度参数，仅通过时长即可精准控制震动反馈的强弱，所有鸿蒙设备通用，记牢即可直接复用：▸ 轻震 / 微震（按钮点击、选中反馈）：50ms - 200ms → 触感轻柔，不打扰用户，最常用；▸ 中震（成功提醒、表单提交）：300ms - 500ms → 触感明显，反馈清晰，体验最佳；▸ 强震（错误提示、重要提醒）：600ms - 1500ms → 触感强烈，起到警示作用，慎用；▸ 超长震（紧急提醒）：2000ms+ → 仅用于特殊场景，避免过度使用影响体验。

三、实战核心：鸿蒙端 4 个高频震动场景完整实战

本文的核心实战部分，整理了 React Native 鸿蒙开发中 Vibration 模块最常用的 4 个业务场景，覆盖「零基础入门→进阶实战」，所有案例均为真实项目高频需求，代码完整、注释清晰、样式美观，鸿蒙真机完美适配，零报错可直接复制到项目中使用，无需修改，0 基础也能轻松看懂，吃透这 4 个案例，即可应对鸿蒙端所有震动反馈需求。

核心前置说明

所有案例共用「统一基础样式」，样式贴合鸿蒙原生设计风格，适配所有鸿蒙设备屏幕尺寸，视觉美观，无需额外调整，所有案例的代码均包含完整的「导入→组件→样式→导出」全流程，独立可运行。

场景一：基础单次震动

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Vibration } from 'react-native';

const VibrationBasicDemo = () => {
  // 添加状态变量：存储震动状态提示
  const [vibrateStatus, setVibrateStatus] = useState('未触发任何震动');

  // 轻震：50ms 按钮点击反馈 - 更新状态
  const vibrateLight = () => {
    setVibrateStatus('正在触发：轻震反馈（50ms）');
    Vibration.vibrate(50);
    // 震动结束后恢复状态（延迟 100ms，与震动时长匹配）
    setTimeout(() => {
      setVibrateStatus('轻震反馈执行完成');
    }, 100);
  };

  // 中震：300ms 成功提醒反馈 - 更新状态
  const vibrateMiddle = () => {
    setVibrateStatus('正在触发：中震反馈（300ms）');
    Vibration.vibrate(300);
    setTimeout(() => {
      setVibrateStatus('中震反馈执行完成');
    }, 350);
  };

  // 强震：800ms 错误/重要提醒反馈 - 更新状态
  const vibrateStrong = () => {
    setVibrateStatus('正在触发：强震反馈（800ms）');
    Vibration.vibrate(800);
    setTimeout(() => {
      setVibrateStatus('强震反馈执行完成');
    }, 850);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>基础单次震动（不同强度）</Text>
      {/* 视觉反馈：显示当前震动状态 */}
      <Text style={styles.statusText}>{vibrateStatus}</Text>
      <TouchableOpacity style={styles.btn} onPress={vibrateLight} activeOpacity={0.7}>
        <Text style={styles.btnText}>轻震反馈 (50ms)</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btn} onPress={vibrateMiddle} activeOpacity={0.7}>
        <Text style={styles.btnText}>中震反馈 (300ms)</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btn} onPress={vibrateStrong} activeOpacity={0.7}>
        <Text style={styles.btnText}>强震反馈 (800ms)</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f8fa',
    paddingHorizontal: 20,
    gap: 20
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600'
  },
  // 新增状态文本样式
  statusText: {
    fontSize: 15,
    color: '#007DFF',
    textAlign: 'center',
    minHeight: 20
  },
  btn: {
    width: '90%',
    height: 50,
    backgroundColor: '#007DFF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnText: {
    fontSize: 16,
    color: '#ffffff',
    fontWeight: '500'
  }
});

export default VibrationBasicDemo;

场景二：多段式间歇震动

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

// 多段式间歇震动案例
const VibrationMultiDemo = () => {
  // 核心：数组参数 [震1时长, 停时长, 震2时长, 停时长...] 交替排列
  const vibrateMulti = () => {
    // 震动规则：轻震100ms → 暂停200ms → 强震600ms → 暂停200ms → 轻震100ms
    Vibration.vibrate([100, 200, 600, 200, 100]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>多段式间歇震动</Text>
      <Text style={styles.tips}>轻震 → 暂停 → 强震 → 暂停 → 轻震</Text>
      <TouchableOpacity style={styles.btn} onPress={vibrateMulti} activeOpacity={0.7}>
        <Text style={styles.btnText}>触发定制化震动</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f8fa',
    paddingHorizontal: 20,
    gap: 20
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600'
  },
  tips: {
    fontSize: 14,
    color: '#666666',
    textAlign: 'center'
  },
  btn: {
    width: '90%',
    height: 50,
    backgroundColor: '#007DFF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnText: {
    fontSize: 16,
    color: '#ffffff',
    fontWeight: '500'
  }
});

export default VibrationMultiDemo;

 场景三：无限重复震动 + 手动取消震动

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

// 无限重复震动 + 取消震动案例
const VibrationRepeatDemo = () => {
  // 开启无限重复震动：[震动300ms, 暂停200ms] 循环执行
  const startVibrate = () => {
    Vibration.vibrate([300, 200], true);
  };

  // 立即取消所有震动
  const stopVibrate = () => {
    Vibration.cancel();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>无限重复震动 & 手动取消</Text>
      <View style={styles.btnWrap}>
        <TouchableOpacity style={styles.startBtn} onPress={startVibrate} activeOpacity={0.7}>
          <Text style={styles.btnText}>开始震动提醒</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.stopBtn} onPress={stopVibrate} activeOpacity={0.7}>
          <Text style={styles.btnText}>停止震动</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f8fa',
    paddingHorizontal: 20
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600',
    marginBottom: 30
  },
  btnWrap: {
    width: '90%',
    gap: 15
  },
  startBtn: {
    height: 50,
    backgroundColor: '#007DFF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  stopBtn: {
    height: 50,
    backgroundColor: '#FF4444',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnText: {
    fontSize: 16,
    color: '#ffffff',
    fontWeight: '500'
  }
});

export default VibrationRepeatDemo;

 场景四：业务综合实战 - 表单操作差异化震动反馈

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

// 业务综合实战：表单差异化震动反馈
const VibrationBusinessDemo = () => {
  // 提交成功 - 中震反馈 300ms
  const successVibrate = () => {
    Vibration.vibrate(300);
  };

  // 提交失败 - 强震反馈 800ms
  const failVibrate = () => {
    Vibration.vibrate(800);
  };

  // 重置表单 - 轻震反馈 80ms
  const resetVibrate = () => {
    Vibration.vibrate(80);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>表单操作 差异化震动反馈</Text>
      <TouchableOpacity style={styles.successBtn} onPress={successVibrate} activeOpacity={0.7}>
        <Text style={styles.btnText}>提交成功</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.failBtn} onPress={failVibrate} activeOpacity={0.7}>
        <Text style={styles.btnText}>提交失败</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.resetBtn} onPress={resetVibrate} activeOpacity={0.7}>
        <Text style={styles.btnText}>重置表单</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f7f8fa',
    paddingHorizontal: 20,
    gap: 15
  },
  title: {
    fontSize: 20,
    color: '#1a1a1a',
    fontWeight: '600',
    marginBottom: 10
  },
  successBtn: {
    width: '90%',
    height: 50,
    backgroundColor: '#00C853',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  failBtn: {
    width: '90%',
    height: 50,
    backgroundColor: '#FF4444',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  resetBtn: {
    width: '90%',
    height: 50,
    backgroundColor: '#007DFF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnText: {
    fontSize: 16,
    color: '#ffffff',
    fontWeight: '500'
  }
});

export default VibrationBusinessDemo;

四、鸿蒙端专属适配要点 & 开发注意事项

整理了 Vibration 模块在鸿蒙版 RN 开发中的核心适配细节与实战注意事项，所有内容均为真机实测总结，无冗余信息，掌握这些要点，可避免 99% 的开发问题，确保鸿蒙端震动功能完美运行，也是 0 基础开发者的避坑指南：

✅ 核心适配要点

  1. 鸿蒙模拟器无震动效果：这是最常见的「问题」，并非代码错误 —— 鸿蒙模拟器没有震动硬件，所有震动代码在模拟器上均无效果，必须使用鸿蒙真机调试，真机上震动功能完全正常；
  2. 震动时长的取值规范：鸿蒙端支持的有效时长为 10ms ~ 10000ms，小于 10ms 的震动无触感，大于 10 秒的震动会被系统限制为 10 秒，推荐取值 50-2000ms，体验最佳；
  3. 无需配置任何权限：鸿蒙系统中，应用调用震动功能属于「基础交互权限」，无需在 entry/src/main/config.json 中配置任何权限声明，直接调用即可，无合规性问题；
  4. 震动强度的控制技巧：鸿蒙端无「强度参数」，通过「震动时长」控制强度是官方最优解，短时长 = 弱震，长时长 = 强震，无需额外开发；
  5. 鸿蒙版本兼容：鸿蒙 2.0 及以上版本全量支持 Vibration 模块的所有 API，无版本差异，无需做版本判断。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# react native # react.js # javascript
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

Flutter 框架跨平台鸿蒙开发 —— 数据映射与归一化：构建高性能鸿蒙自定义图表

avatar 人工智能6S服务平台
cover

React Native 鸿蒙跨平台开发：LayoutAnimation 实现鸿蒙端页面切换的淡入淡出过渡动画

avatar 人工智能6S服务平台
cover

Flutter for OpenHarmony 实战：RangeSlider 范围滑块详解

avatar 人工智能6S服务平台