Vibration

使设备振动。

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

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

核心方法

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

1. 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 模块是更通用的方式。

2. cancel()

   • 作用：立即停止当前正在进行的振动。无论在哪个平台，调用此方法都会终止振动。

平台差异详解

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

使用示例

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

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

const VibrationDemo = () => {
  // 定义振动模式和循环状态
  const [vibrationPattern, setVibrationPattern] = useState([1000, 2000, 3000]); // 示例模式
  const [isRepeating, setIsRepeating] = useState(false);

  // 触发振动
  const handleVibrate = () => {
    // 根据平台选择不同的调用方式
    if (Platform.OS === 'android') {
      Vibration.vibrate(vibrationPattern, isRepeating);
    } else {
      // iOS 上，如果需要循环，需要手动处理
      if (isRepeating) {
        // 对于循环振动，可以使用一个简单的模式数组
        Vibration.vibrate([1000, 1000], true); // 间隔1秒，循环
      } else {
        // 非循环振动，直接调用
        Vibration.vibrate();
      }
    }
  };

  // 取消振动
  const handleCancel = () => {
    Vibration.cancel();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native 振动示例</Text>
      <Button title="开始振动" onPress={handleVibrate} />
      <Button title="取消振动" onPress={handleCancel} />

实际案例演示：

import React from 'react';
import {
  Button,
  Platform,
  Text,
  Vibration,
  View,
  SafeAreaView,
  StyleSheet,
} from 'react-native';

const Separator = () => {
  return <View style={Platform.OS === 'android' ? styles.separator : null} />;
};

const App = () => {
  const ONE_SECOND_IN_MS = 1000;

  const PATTERN = [
    1 * ONE_SECOND_IN_MS,
    2 * ONE_SECOND_IN_MS,
    3 * ONE_SECOND_IN_MS,
  ];

  const PATTERN_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]}>Vibration API</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>
  );
};

const styles = 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,
  },
});

export default App;

这段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开发中的重要特性，它允许开发者编写一套代码，同时在不同平台上获得原生的用户体验。

打包

接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle，这样可以进行在开源鸿蒙OpenHarmony中进行使用。

最后运行效果图如下显示：

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。