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

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

Иногда мне нравится добавлять обратную связь по непрозрачности при активном касании. Он не предоставляется в виде реквизита напрямую. Что-то похожее на то, что активная непрозрачность поддерживает 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;
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

  • children который используется для добавления метки на кнопку (используя как Text компонент из React Native)
  • ...otherProps используется для передачи всех реквизитов нижележащему компоненту Pressable.

В этом случае, поскольку компонент-оболочка, который вы создаете, будет отвечать только за обработку непрозрачности, других важных реквизитов, таких как onPress остаются для обработки там, где используется этот компонент-оболочка. я должен использовать Сенсорный индикатор на симуляторе 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 составные части.


Запуск примера

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

сс1


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

В некоторых сценариях вы можете захотеть добавить и использовать непрозрачность в качестве обратной связи. Например, уменьшите непрозрачность до 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>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

сс2


Вывод

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

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