在React Native的可触摸视图上启用触觉反馈。

Question

我正在编写一个React Native应用程序，并注意到当点击按钮时，虽然按钮看起来像本机按钮，但它们的行为并不像一个（至少不像Android按钮一样）。

在Android应用程序上点击按钮会发出声音并给用户一种触觉反馈。 关于声音，我看到了Github上的讨论和开放问题，但我无法在任何地方找到关于触觉反馈的信息。

我如何使我的视图（任何可触摸的视图...）在点击时产生触觉反馈？ 这是应用程序中非常重要的体验。

我想要像这样的东西（在Android中）

View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);

这不需要应用程序拥有“振动”权限。

而且使用Vibrate API自己管理触觉反馈会导致全局禁用此选项的用户体验不佳。

谢谢

- Nadav Nagel

Answer 1

如果您正在使用Expo和React Native，我建议您使用Expo haptics。

安装库后，您可以像这样使用它：

<TouchableOpacity onPress = { ()=> { 
     Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
     or
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) 
     or
     Haptics.selectionAsync()
   
 } } > </TouchableOpacity>

- A.R.Basith

---

这段代码应该放在哪里？它和3D Touch类似吗？ - Rami Salim

Answer 2

我在github上发现了这个组件https://github.com/charlesvinette/react-native-haptic

虽然我还没有尝试过，但它应该能帮助您获得所需的触觉反馈。

- David

Answer 3

您可以使用内置的振动模块facebook.github.io/react-native/docs/touchablewithoutfeedback。

import { Vibration } from 'react-native';
...

<TouchableWithoutFeedback
  onPressIn={() => Vibration.vibrate()}
/>

请在AndroidManifest中包含此内容。

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

- Ivan Wu

---

这并不模拟触觉反馈感。我编辑了我的问题以使其更具体。 - Nadav Nagel

触觉反馈难道不只是在敲击时的振动吗？如果你想改变振动，就需要传递参数。 - Ivan Wu

我知道，而安卓的常量为 Vibration.vibrate(3)。但这意味着我需要自己处理 - 对于每个操作系统都不同，还要检查用户的安卓全局设置。我本以为这将是 React Native 平台会处理的事情。 - Nadav Nagel

权限问题已经解决了，谢谢Ivan。但是在iOS上没有起作用。是否需要添加一些权限？ - Noitidart

这就是为什么我转向使用Nativescript，它提供了100%本地化的感觉。 - Toni Joe

Answer 4

我也有几乎相同的需求，最后我使用了这个库react-native-haptic-feedback。

请记住，触觉反馈仅适用于一些最新的Android设备和iPhone 6s以上的iOS版本。这是一个简单的代码片段：

import ReactNativeHapticFeedback from "react-native-haptic-feedback";

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false
};

ReactNativeHapticFeedback.trigger("impactMedium", options);

在您的情况下，它将直接与按钮的onPress方法一起工作，例如：

<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />

注意：我发现被最多设备支持的最通用类型是impactMedium。

- Umang Loriya

---

如果有人在支持触感反馈的任何iOS设备上的React Native版本> 0.60时，无法获得任何触感反馈，请转到XCode文件夹结构（位于XCode左上角）中的React Native项目目录=> 转到Build Phases选项卡（位于XCode屏幕中央上部）=> 下拉菜单链接二进制库和库=> 添加（通过单击+拖动以重新排序链接的二进制文件）=>搜索 "libRNReactNativeHapticFeedback.a" =>添加它。 然后停止运行并重新运行您的项目或https://github.com/junina-de/react-native-haptic-feedback/issues/40 - Chanrithisak Phok

Answer 5

我在Github上发布了一个项目，提供了这个功能。请查看这个仓库：react-native-haptic-view

- Hamid