本篇要來介紹Expo官方提供兩項元件

• Expo Speech 語音功能
• Expo Haptics 觸覺回饋功能

另外加碼介紹一項React Native 官方APIs

• Vibration 震動元件

這些應用最常應用在於
在「發票+」APP掃描發票時
對準QR Code就能對發票
有中獎的話，會發出聲音(恭喜中獎)及震動

大家看完文章，也要記得趕緊對發票💸

觸覺回饋 & 震動 差別

初次接觸APP的開發者
可能對這兩項效果沒什麼概念
甚至自己在開發時還挑錯體驗類型，最後打掉重寫🙄
同樣都有震動效果，卻分不出何時要使用

簡單做一下比較表格

懶人包：

觸覺回饋是一種通過觸摸屏幕或設備提供的物理反饋，用於模擬物理操作的感覺
而震動是一種機械振動或搖晃，用於產生感覺或傳遞訊息。
觸覺回饋可以包括震動，但它更廣泛，包括其他觸感效果

Expo Speech 語音功能

官方介紹 & Usage：https://docs.expo.dev/versions/latest/sdk/speech/

介紹

Expo Speech是Expo的官方套件
提供文字轉語音(TTS)合成的功能，不分語言
也就是叫用Web、APP皆有的朗讀工具功能

※此套件在Web、APP皆可使用
另外要注意的是
這是內建朗讀工具，不是Google小姐😂

安裝

npx expo install expo-speech
使用版本：11.3.0

使用方法

基本用法

借一下官方的範例使用
只要放入文字，調用Speech.speak
執行程式後，就會說出「沒有靈魂的發音」

import * as Speech from 'expo-speech';
const speak = () => {
  const thingToSay = "沒有靈魂的發音";
  Speech.speak(thingToSay);
};
return (
    <View style={styles.container}>
      <Button title="Press to hear some words" onPress={speak} />
    </View>
);

暫停、復原、停止說話

• 暫停：Speech.pause()
• 復原：Speech.resume()
• 停止說話：Speech.stop()

進階設定用法

Speech.speak是可以設定朗讀速度、音調、語言...等功能的

const speak = () => {
  const thingToSay = '123';

  Speech.speak(thingToSay,{
      language : "en-US",
      rate : 0.7,
      pitch : 5,
      onDone : () => {Alert.alert("訊息","講完了")}
  });
};

• language 預設語言，設定朗讀小姐的語言
  假設'123'中文發音為：一百二十三
  英文發音為：One hundred twenty-three

IETF BCP 47語系切換Language Tag參考
https://www.techonthenet.com/js/language_tags.php

• rate 朗讀速度，調越高越快，反之更慢
• pitch 朗讀音調，調越高音調越高，反之更慢
• onDone 朗讀結束時所觸發的事件

更多功能參考官方提供的SpeechOptions
希望大家不要玩壞朗讀小姐姐

Expo Haptics 觸覺回饋功能

官方介紹：https://docs.expo.dev/versions/latest/sdk/haptics/

介紹

Expo Haptics是Expo的官方套件，用於使用者觸覺回饋(Feedback)效果
手機放桌上，按下按鈕，會有短暫震動回饋

安裝

npx expo install expo-haptics
使用版本：12.2.1

使用方法

通知型觸覺回饋

雖然叫做「通知型」
但這項回饋震動時間非常短
使用上請留意需求是否符合

在Iphone收到簡訊時，就是此回饋類型

import * as Haptics from 'expo-haptics';
<Button
  title="Success"
  onPress={() => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
  }
/>;

回饋類型 NotificationFeedbackType 有以下幾種選擇
提供不同的觸覺回饋感

• Success 回饋震動兩下，回饋感較輕
• Warning 回饋震動兩下，回饋感較重
• Error 回饋震動四下

單一型觸覺回饋

指的是按一下按鈕、長按觸碰器回饋的感覺
通常用於按按鈕、敲鍵盤

<Button
  title="Heavy"
  onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)}
/>;

回饋類型 ImpactFeedbackStyle 有以下幾種選擇
提供不同的觸感回饋明顯程度

• Light 輕
• Medium 中
• Heavy 重

React Native Vibration

官方介紹：https://reactnative.dev/docs/vibration

介紹

中文翻譯就是震動，React Native框架的一部分
能提供使用者在手機呈現短、長、間隔式...等客製化震動效果
在Line、Messager、Gmail、鬧鐘、國家級警報...許多APP皆有震動功能

使用方法

引入
import { Vibration } from 'react-native';

單下震動

在 Android 上，振動持續時間預設為 400 毫秒，並且可以透過傳遞數字作為參數值來指定任意振動持續時間pattern。在 iOS 上，振動持續時間固定為大約 400 毫秒。
400毫秒=0.4秒

function Vibrating() {
  Vibration.vibrate();
}

停止震動

通常開發鬧鐘、提醒APP會使用

function CancelVibrating() {
  Vibration.cancel();
}

震動間隔、次數

官方範例設定震動PATTERN是

1. 第一次震動
2. 隔1秒震動第二次
3. 隔2秒震動第三次
4. 隔3秒震動第四次

vibrate 後方設定true 則持續上方迴圈
直到呼叫停止震動function

const ONE_SECOND_IN_MS = 1000;

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

function ContinuousVibration() {
  Vibration.vibrate(PATTERN, true);
}

結語：
以上三項元件在官方都有提供Snack
還請多加利用Expo Go掃描QR Code試玩看看

本篇這三項元件的缺點只有
「符不符合使用者需求」
如果客戶不想要語音合成，想要人聲發音
那一定要更換套件了😟

下一篇要來介紹 - Expo Location 使用者位置追蹤功能
了解一下那些定位APP是怎麼取得你手機的位置。