Воспринимаемая производительность имеет решающее значение в мобильных приложениях. Нам нужно сделать наши приложения быстрыми и быстрыми, иначе пользователи не будут их использовать.
Добавление таких функций, как анимация и тактильная обратная связь, делает мобильные приложения более производительными. В этой статье мы поговорим о Haptic Feedback в React Native — что это такое и как мы можем реализовать его в мобильных приложениях.
Тактильная обратная связь — это сконструированная обратная связь от прикосновения к игре, консоли или смартфону. Вы знаете эти вибрации из ваших любимых видеоигр, когда ваш персонаж умирает или когда мяч попадает в перекладину в FIFA.
Взгляните на большие приложения, такие как Facebook, Instagram или Twitter, и обратите внимание, как приятна тактильная обратная связь в вашей руке, когда вы выполняете важные действия, такие как лайки или подписки.
Библиотека тактильной обратной связи, которую мы собираемся изучить в этом руководстве по React Native, предоставлена компанией Expo и называется expo-haptics. После изучения библиотеки мы продолжим и создадим крошечное приложение, чтобы применить то, что мы узнали.
Установка
Создать новый выставочный проект
expo init haptic_feedback_example
Установите expo-haptics
expo install expo-haptics
Теперь давайте рассмотрим методы и их наиболее вероятный вариант использования. Эта зависимость предоставляет три метода:
а. Haptics.selectionAsync(): эта функция не принимает аргументов. Этот вызов производит вибрацию примерно через 1 секунду после срабатывания этой функции. Эту функцию можно применить, когда анимация завершена. Анимация может быть инициирована пользователем или программно.
б. Haptics.notificationAsync(type): эта функция принимает аргумент type, который может быть одним из следующих:
- Haptics.NotificationFeedbackType.Success
- Haptics.NotificationFeedbackType.Warning
- Haptics.NotificationFeedbackType.Error
Эта функция может применяться при предоставлении обратной связи после проверки. Постоянные пользователи Snapchat знакомы с этой вибрацией на своем телефоне после сканирования QR-кода Snapchat.
в. Haptics.impactAsync(style): эта функция также принимает только один аргумент, который обычно представляет собой одно из трех значений в зависимости от интенсивности желаемой обратной связи:
- Haptics.ImpactFeedbackStyle.Light
- Haptics.ImpactFeedbackStyle.Medium
- Haptics.ImpactFeedbackStyle.Heavy
Эта функция при вызове обеспечивает более быструю обратную связь, чем selectionAsync, и может использоваться для предоставления мгновенной тактильной обратной связи, когда пользователь нажимает кнопку. Начинкой на торте является то, что вы можете регулировать интенсивность вибрации.
Тактильная обратная связь в React Native
Пример 1
У нас уже есть проект React Native, поэтому давайте создадим простой проект, протестируем метод impactAsync и изучим различные стили тактильной обратной связи:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
import * as Haptics from 'expo-haptics';
const HapticFeedbackExample = () => {
function impactAsync(style) {
switch (style) {
case 'light':
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
break;
case 'medium':
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
break;
default:
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
break;
}
}
return (
<View>
<TouchableOpacity onPress={() => impactAsync('light')}>
<Text style={styles.light}>Light</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => impactAsync('medium')}>
<Text style={styles.medium}>Medium</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => impactAsync('heavy')}>
<Text style={styles.heavy}>Heavy</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
light: {
color: '#ffffff',
fontSize: 20,
width: 300,
height: 100,
backgroundColor: 'green',
marginVertical: 10,
},
medium: {
color: '#ffffff',
fontSize: 20,
width: 300,
height: 100,
backgroundColor: 'orange',
marginVertical: 10,
},
heavy: {
color: '#ffffff',
fontSize: 20,
width: 300,
height: 100,
backgroundColor: 'red',
marginVertical: 10,
},
});
Что мы делаем в кодовой базе React Native выше?
Мы создаем три кнопки для представления трех стилей impactAsync. У нас есть этот простой снимок экрана, показывающий различные кнопки с их несколькими стилями и интенсивностью:
Запустите проект и начните попеременно нажимать три кнопки. При внимательном наблюдении вы заметите небольшие различия в интенсивности в диапазоне от легкой до средней и тяжелой.
Пример 2
Давайте создадим небольшой QR-сканер, чтобы проверить, является ли разрешенный QR-код допустимым URL-адресом.
Для этого мы должны добавить expo-barcode-scanner, предоставленный Expo.
expo install expo-barcode-scanner
Давайте напишем код для сканирования случайного штрих-кода и проверки правильности URL-адреса:
import React, {useState, useEffect} from 'react';
import {Text, View, StyleSheet, Button, Alert} from 'react-native';
import {BarCodeScanner} from 'expo-barcode-scanner';
import * as Haptics from 'expo-haptics';
export default function App() {
const [isPermitted, setPermitted] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const {status} = await BarCodeScanner.requestPermissionsAsync();
setPermitted(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({type, data}) => {
setScanned(true);
is_url(data);
};
function is_url(str) {
const regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
hapticNotify(regexp.test(str));
}
const hapticNotify = (success) => {
switch (success) {
case true:
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
Alert.alert('Success', 'This is a URL');
break;
default:
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
Alert.alert('Error', 'This is not a URL!!');
break;
}
};
if (isPermitted === null) {
return <Text>Requesting for camera permission</Text>;
}
if (isPermitted === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && (
<Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Что мы делаем в кодовой базе выше?
Мы должны сначала запросить разрешение, прежде чем мы приступим к сканированию штрих-кода, а затем проверим результат сканирования, чтобы проверить, является ли он URL-адресом:
Мы применяем различные стили тактильной обратной связи в зависимости от того, является ли URL-адрес отсканированного штрих-кода действительным или нет. Вы заметите разницу в тактильной обратной связи между сканированием действительного штрих-кода URL-адреса и недействительного штрих-кода URL-адреса.
Заключение о тактильной обратной связи в React Native
Мы рассмотрели библиотеку expo-haptics и возможные варианты ее использования. Мы пошли дальше, чтобы применить то, что мы узнали, создав пару небольших приложений, чтобы применить эти варианты использования и получить практическое представление о том, как ведут себя эти взаимодействия.
Добавить тактильную обратную связь в приложения React Native довольно просто, учитывая, что существуют библиотеки, которые могут сделать эту задачу тривиальной. Однако вам нужно тщательно выбирать, когда запускать эти тактильные взаимодействия с обратной связью, чтобы предоставить высококачественное мобильное приложение. Злоупотребление этими вибрациями разозлит ваших пользователей, а также довольно быстро разрядит аккумулятор их телефона, поэтому выбирайте с умом.
Чтобы узнать больше о мобильной производительности, ознакомьтесь с нашей статьей о том, как повысить производительность в мобильных приложениях.
Первоначально опубликовано на https://www.instamobile.io 10 февраля 2021 г.
