0 基础入门React Native鸿蒙跨平台开发：Vibration设备振动功能演示-开发者社区

本文是基于HarmonyOS API 24的进行的ReactNative 鸿蒙跨平台开发依托适配鸿蒙的 RN 运行层，使用 React 与 JS 编写一套业务代码，无需大量 ArkTS 原生开发，通用业务实现代码复用，支持按需扩展原生桥调用鸿蒙特有能力，有效降低多平台开发维护成本。

ReactNative 鸿蒙跨平台开发，简单来说就是基于 ReactNative 技术栈，依托鸿蒙平台适配层，使用 JavaScript 与 React 语法编写一套业务代码，经过编译适配后同时支撑鸿蒙应用、安卓、iOS 等多端运行的开发方案。开发者沿用前端熟悉的组件化、状态管理等 React 开发范式，不用分别针对鸿蒙原生 ArkTS、安卓原生、iOS 原生独立实现相同业务逻辑，依靠桥接层完成 JS 逻辑与鸿蒙原生能力的通信，调用鸿蒙的窗口、媒体、设备硬件等系统接口，最终打包生成鸿蒙应用安装包，兼顾开发效率与多端复用能力，同时也存在部分鸿蒙特有系统能力需要编写原生桥模块进行扩展适配，复杂交互、高性能场景下要权衡跨平台通用方案与原生开发的取舍。

ReactNative 鸿蒙跨平台开发优势：

1.前端开发者直接复用已有的 React 开发经验与存量业务代码，一套代码可同时产出鸿蒙、安卓、iOS 多端应用，大幅降低多平台分别开发、维护的人力与时间成本，迭代更新时多数业务改动只需修改一处代码就能同步生效
2.借助 JS 热更新机制还能绕过应用商店快速推送功能修复与轻度版本变更
3.依托成熟的 React 生态，海量第三方组件、工具库可以直接接入，不用从零适配鸿蒙原生开发体系，上手门槛更低
4.熟悉网页与 React 技术的开发人员可以快速转型参与鸿蒙应用建设；
5.框架内置 JS 与原生的通信桥，基础 UI、网络、存储等通用设备能力开箱可用

大部分常规业务场景无需编写原生扩展模块，同时支持按需开发鸿蒙原生桥接模块调用系统独有能力，在跨端复用和平台特性之间保留灵活平衡，相比纯原生多端开发，团队可以更快完成产品落地，适合业务频繁迭代、需要同时覆盖多终端的中小型应用场景。

–

Vibration

使设备振动。

好的，以下是关于 React Native 中Vibration模块的详细说明。

Vibration是 React Native 内置的一个模块，用于控制设备的振动功能。它在不同平台（Android 和 iOS）上的实现和参数有所不同，需要特别注意。

核心方法

Vibration模块主要包含两个方法：

vibrate(pattern, repeat)
- 作用：触发设备振动。
- 参数：
  - pattern：这是一个关键参数，其类型和含义在不同平台上有显著差异。
    - Android：接受一个数字数组。数组的第一个元素通常表示开始振动前的延迟时间（单位：毫秒），之后的元素交替表示振动时长和静止（间隔）时长。例如，[0, 500, 1000, 500]表示立即振动 500ms，等待 1000ms，再振动 500ms。
    - iOS：接受一个数字数组，但数组中的每个数字都表示振动之间的间隔时间（单位：毫秒）。因为 iOS 设备的单次振动时长是固定的（约 400ms），所以无法通过参数改变单次振动的长短。
    - 简化用法：如果只传入一个数字（如500），在 Android 上表示振动 500ms；在 iOS 上则表示振动一次（固定时长）。
  - repeat：一个布尔值，表示是否循环振动。true表示循环，直到调用cancel()方法才会停止；false表示只执行一次。
- 注意：在 iOS 上，vibrate()方法通常需要通过VibrationIOS来调用，但现代 React Native 版本中，直接使用Vibration模块是更通用的方式。
cancel()
- 作用：立即停止当前正在进行的振动。无论在哪个平台，调用此方法都会终止振动。

平台差异详解

理解 Android 和 iOS 的差异是正确使用此模块的关键：

特性	Android	iOS
振动模式	`pattern`数组可以精确控制振动和间隔的时长。	`pattern`数组仅控制振动之间的间隔，单次振动时长固定。
默认振动时长	可通过参数自定义，或使用默认值（如 400ms）。	固定约为 400 毫秒。
循环控制	通过`repeat`参数控制。	通过`repeat`参数控制。

使用示例

以下是一个综合示例，展示了如何在 React Native 项目中使用振动功能：

importReact,{useState}from'react';import{Button,View,Text,StyleSheet,Vibration,Platform}from'react-native';constVibrationDemo=()=>{// 定义振动模式和循环状态const[vibrationPattern,setVibrationPattern]=useState([1000,2000,3000]);// 示例模式const[isRepeating,setIsRepeating]=useState(false);// 触发振动consthandleVibrate=()=>{// 根据平台选择不同的调用方式if(Platform.OS==='android'){Vibration.vibrate(vibrationPattern,isRepeating);}else{// iOS 上，如果需要循环，需要手动处理if(isRepeating){// 对于循环振动，可以使用一个简单的模式数组Vibration.vibrate([1000,1000],true);// 间隔1秒，循环}else{// 非循环振动，直接调用Vibration.vibrate();}}};// 取消振动consthandleCancel=()=>{Vibration.cancel();};return(<View style={styles.container}><Text style={styles.title}>React Native 振动示例</Text><Button title="开始振动"onPress={handleVibrate}/><Button title="取消振动"onPress={handleCancel}/>

实际案例演示：

importReactfrom'react';import{Button,Platform,Text,Vibration,View,SafeAreaView,StyleSheet,}from'react-native';constSeparator=()=>{return<View style={Platform.OS==='android'?styles.separator:null}/>;};constApp=()=>{constONE_SECOND_IN_MS=1000;constPATTERN=[1*ONE_SECOND_IN_MS,2*ONE_SECOND_IN_MS,3*ONE_SECOND_IN_MS,];constPATTERN_DESC=Platform.OS==='android'?'wait 1s, vibrate 2s, wait 3s':'wait 1s, vibrate, wait 2s, vibrate, wait 3s';return(<SafeAreaView style={styles.container}><Text style={[styles.header,styles.paragraph]}>VibrationAPI</Text><View><Button title="Vibrate once"onPress={()=>Vibration.vibrate()}/></View><Separator/>{Platform.OS==='android'?[<View><Button title="Vibrate for 10 seconds"onPress={()=>Vibration.vibrate(10*ONE_SECOND_IN_MS)}/></View>,<Separator/>,]:null}<Text style={styles.paragraph}>Pattern:{PATTERN_DESC}</Text><Button title="Vibrate with pattern"onPress={()=>Vibration.vibrate(PATTERN)}/><Separator/><Button title="Vibrate with pattern until cancelled"onPress={()=>Vibration.vibrate(PATTERN,true)}/><Separator/><Button title="Stop vibration pattern"onPress={()=>Vibration.cancel()}color="#FF0000"/></SafeAreaView>);};conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',paddingTop:44,padding:8,},header:{fontSize:18,fontWeight:'bold',textAlign:'center',},paragraph:{margin:24,textAlign:'center',},separator:{marginVertical:8,borderBottomColor:'#737373',borderBottomWidth:StyleSheet.hairlineWidth,},});exportdefaultApp;

这段React Native代码实现了一个设备振动功能的演示应用，其核心功能是展示React Native的Vibration API在不同平台上的使用方法。代码通过一系列按钮组件让用户可以体验不同类型的振动效果，同时提供了清晰的视觉反馈和平台适配机制。

在组件结构方面，代码定义了一个Separator组件，这个组件根据平台差异来渲染分隔线。在Android平台上，它显示一个带有细边框的视觉分隔符，而在鸿蒙平台上则不显示任何内容。这种设计考虑到了不同操作系统在视觉设计上的惯例和用户体验的差异。

在App组件中，代码首先定义了时间常量，将1秒转换为毫秒单位。然后创建了一个振动模式数组PATTERN，定义了具体的振动和间隔时间序列。特别值得注意的是，代码还根据平台差异提供了不同的模式描述文本PATTERN_DESC，这是因为Android和鸿蒙平台在振动模式的实现上存在差异，需要为用户提供准确的操作说明。

在功能实现上，代码提供了多种振动模式的选择。基础功能包括单次振动和指定时长的振动。特别针对Android平台，提供了一个持续10秒振动的特殊功能按钮，这反映了不同平台在振动API支持上的特性差异。

振动模式功能允许用户体验复杂的振动序列，通过PATTERN数组定义振动和暂停的交替模式。更高级的功能是持续振动模式，直到手动取消，这种模式在某些需要持续提醒的场景中非常有用。最后，代码还提供了一个红色的停止按钮，用于立即终止所有正在进行的振动模式，提供了完整的操作控制能力。

样式系统通过StyleSheet.create方法定义，container样式确保内容在屏幕上合理布局。header样式定义了标题的字体大小、粗细和对齐方式。paragraph样式设置了外边距和文本对齐。separator样式则定义了分隔线的垂直间距、颜色和宽度，其中使用了StyleSheet.hairlineWidth来获取最细的边框宽度，这在不同的屏幕密度上都能保持良好的视觉效果。

整个应用的架构展示了如何在跨平台开发中处理API差异。通过Platform.OS的条件判断，代码能够针对不同平台提供相应的功能和用户界面。这种平台感知机制是React Native开发中的重要特性，它允许开发者编写一套代码，同时在不同平台上获得原生的用户体验。