如何在React Native应用中添加触觉反馈/振动效果？

要实现这两个场景的振动效果，直接使用React Native内置的Vibration模块即可，不需要额外安装依赖。以下是具体实现步骤：

1. TouchableOpacity点击触发振动 #

导入Vibration模块后，在TouchableOpacity的onPress回调中调用振动方法即可：

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

const VibratingActionButton = () => {
  const handleButtonPress = () => {
    // 触发默认短振动（时长500ms）
    Vibration.vibrate();
    
    // 可选：自定义振动时长（比如200ms）
    // Vibration.vibrate(200);
    
    // 可选：重复振动模式（[振动时长, 间隔时长, 振动时长], 是否循环）
    // Vibration.vibrate([200, 300, 200], true);
    // 若使用循环振动，记得在合适时机调用Vibration.cancel()停止
  };

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={handleButtonPress}
    >
      <Text style={styles.buttonText}>执行操作</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default VibratingActionButton;

2. 挑战成功弹窗显示时触发振动 #

无论你使用React Native原生Modal还是第三方弹窗组件，只需要在弹窗显示的逻辑中调用Vibration.vibrate()即可：

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

const ChallengeSuccessPopup = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleChallengeComplete = () => {
    // 先触发振动，再显示弹窗
    Vibration.vibrate();
    setIsModalVisible(true);
  };

  const closeModal = () => {
    setIsModalVisible(false);
  };

  return (
    <View style={styles.container}>
      <Button title="完成挑战" onPress={handleChallengeComplete} />
      
      <Modal
        visible={isModalVisible}
        animationType="fade"
        transparent={true}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>挑战成功！</Text>
            <Button title="确定" onPress={closeModal} />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalContent: {
    width: 280,
    padding: 20,
    backgroundColor: '#fff',
    borderRadius: 12,
    alignItems: 'center',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 15,
  },
});

export default ChallengeSuccessPopup;

注意事项 #

• Android权限配置：在android/app/src/main/AndroidManifest.xml中添加振动权限：

  <uses-permission android:name="android.permission.VIBRATE" />
  

• iOS适配：iOS 13及以上版本默认支持基础振动，无需额外配置；若使用复杂振动模式，需注意不同设备的支持差异。
• 循环振动清理：如果使用了循环振动模式（Vibration.vibrate(pattern, true)），务必在组件卸载或不再需要振动时调用Vibration.cancel()停止振动，避免资源浪费。

内容的提问来源于stack exchange，提问作者Shep Sims