Как добавить непрозрачность компоненту Pressable в React Native

Компонент Pressable был представлен в 2020 году в качестве обертки основного компонента, который можно использовать вместо существующих touchable-компонентов в React Native. Этими сенсорными компонентами являются TouchableOpacity, TouchableHighlight и TouchableWithoutFeedback. Эти компоненты включают стили и эффекты, которые иногда не соответствуют желаемому результату на отдельных платформах (iOS и Android).

Я вижу использование компонента Pressable в том, что его можно настроить с точки зрения стиля, внешнего вида и расширенной функциональности, создав вокруг него пользовательскую обертку/компонент. Он также предлагает множество реквизитов, таких как onPressIn, onPressLong, hitSlop, delayLongPress и так далее, которые могут быть использованы для реализации этих расширенных функций.

Иногда мне нравится добавлять обратную связь по непрозрачности, когда прикосновение активно. Она не предоставляется в виде реквизита напрямую. Что-то похожее на то, что делает activeOpacity prop на TouchableOpacity.

В этом посте давайте создадим компонент-обертку, который использует Pressable для добавления обратной связи по непрозрачности к компоненту.

Создание компонента-обертки

Начните с создания пользовательского компонента Pressable без собственных стилей, чтобы он мог быть компонентом многократного использования.

// Pressable.js

import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, ...otherProps }) {
  const _style = useCallback(() => [style && style], [style]);

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;
Вход в полноэкранный режим Выход из полноэкранного режима

До сих пор он принимал только два реквизита:

В этом случае, поскольку создаваемый вами компонент-обертка будет отвечать только за обработку непрозрачности, другие важные реквизиты, такие как onPress, будут обрабатываться там, где используется этот компонент-обертка. Мне нужно использовать индикатор Touch на симуляторе iOS, чтобы показать, что кнопка нажата.

Использование компонента-обертки

Чтобы использовать компонент-обертку в его текущем состоянии, импортируйте его:

import { StyleSheet, Text, View } from 'react-native';

import Pressable from './Pressable';

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 24,
    color: '#fff'
  }
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Не забудьте добавить некоторые стили к компонентам Text и Pressable.

Выполнение примера

Вот результат, который я получил, выполнив приведенный выше код. Обратите внимание, что нет визуальной обратной связи, когда я нажимаю на компонент на экране приложения.

Добавление параметра непрозрачности к компоненту-обертке

В некоторых сценариях вы можете захотеть добавить и использовать непрозрачность в качестве обратной связи. Например, уменьшить непрозрачность до 0.5, когда кнопка нажата.

Вы можете расширить styles для принятия аргумента pressed. Это булево число, которое показывает, нажат компонент в данный момент или нет. С его помощью можно изменять значение свойства opacity в стилях.

В компоненте-обертке добавьте новый параметр activeOpacity. Этот параметр принимает число между 0 и 0.99. Он используется условно для свойства opacity и будет истинным только тогда, когда компонент нажат.

Когда компонент не находится в нажатом состоянии, значение непрозрачности равно 1.

import React, { useCallback } from 'react';
import { Pressable as RNPressable } from 'react-native';

function Pressable({ children, style, activeOpacity, ...otherProps }) {
  const _style = useCallback(
    ({ pressed }) => [{ opacity: pressed ? activeOpacity : 1 }, style && style],
    [style]
  );

  return (
    <RNPressable style={_style} {...otherProps}>
      {children}
    </RNPressable>
  );
}

export default Pressable;
Вход в полноэкранный режим Выход из полноэкранного режима

Запуск примера со значением activeOpacity

Приведенный ниже фрагмент кода изменяет предыдущий пример, добавляя значение activeOpacity, равное 0,5:

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
        activeOpacity={0.5}
      >
        <Text style={styles.text}>Press me</Text>
      </Pressable>
    </View>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вывод после этого шага подтверждает, что непрозрачность изменяется, как и ожидалось.

Заключение

Компонент Pressable имеет множество реквизитов, которые можно использовать для написания обширной и индивидуальной обертки, отвечающей требованиям вашего приложения. Он является предпочтительным в официальной документации React Native и обеспечивает перспективный способ обработки событий, связанных с прикосновениями.

🐙 Ознакомьтесь с полным кодом на GitHub.
🚀 Другие руководства по React Native смотрите в моем блоге.

Оцените статью
devanswers.ru
Добавить комментарий