React Native에서 Pressable 구성 요소에 불투명도를 추가하는 방법

Pressable 컴포넌트는 2020년 리액트 네이티브에서 기존 터치 가능한 컴포넌트 대신 사용할 수 있는 핵심 컴포넌트 래퍼로 도입되었습니다. 이러한 터치 가능한 구성 요소는 TouchableOpacity, TouchableHighlight 및 TouchableWithoutFeedback입니다. 이러한 구성 요소에는 때때로 개별 플랫폼(iOS 및 Android)에서 원하는 결과를 충족하지 못하는 스타일과 효과가 포함됩니다.

Pressable 구성 요소를 사용하는 방식은 스타일, 모양 및 확장 기능 측면에서 사용자 지정 래퍼/구성 요소를 생성하여 사용자 지정할 수 있다는 것입니다. 또한 이러한 확장 기능을 구현하는 데 사용할 수 있는 onPressIn , onPressLong , hitSlop , delayLongPress 등과 같은 많은 소품을 제공합니다.

때때로 제가 좋아하는 한 가지는 터치가 활성화되었을 때 불투명도 피드백을 추가하는 것입니다. 직접 소품 형태로 제공하지 않습니다. TouchableOpacity의 소품activeOpacity과 유사한 기능입니다.

이 게시물에서는 구성 요소에 불투명도 피드백을 추가하기 위해 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 버튼에 레이블을 추가하는 데 사용됨(React Native의 Text 구성 요소와 같이 사용)

...otherProps는 기본 Pressable 구성 요소에 모든 소품을 전달하는 데 사용됩니다.

이 경우 생성 중인 래퍼 구성 요소는 불투명도 처리만 담당하므로 onPress와 같은 다른 중요한 소품은 이 래퍼 구성 요소가 사용되는 곳에서 처리하도록 남겨집니다. 버튼을 눌렀음을 표시하려면 Touch indicator on an iOS simulator을 사용해야 합니다.

래퍼 구성 요소 사용

래퍼 구성 요소를 현재 상태로 사용하려면 다음과 같이 가져오세요.

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를 확장할 수 있습니다. 구성 요소가 현재 눌러졌는지 여부를 알려주는 부울입니다. 이를 사용하여 스타일의 불투명도 속성 값을 변경할 수 있습니다.

래퍼 구성 요소에서 activeOpacity라는 새 소품을 추가합니다. 이 소품은 0와 0.99 사이의 숫자를 허용합니다. opacity 속성에서 조건부로 사용되며 구성 요소를 누를 때만 true가 됩니다.

구성 요소가 눌린 상태가 아닌 경우 불투명도 값은 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 값으로 예제 실행

아래 코드 스니펫은 이전 예제를 수정하여 0.5의 activeOpacity 값을 추가합니다.

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 component에는 앱의 요구 사항을 충족하는 광범위하고 사용자 정의된 래퍼를 작성하는 데 사용할 수 있는 많은 소품이 있습니다. 공식 React Native 문서에서 선호되며 터치 기반 이벤트를 처리하는 미래 보장 방법을 제공합니다.

🐙 GitHub에서 전체 코드를 확인하십시오.
🚀 더 많은 React Native 자습서를 보려면 checkout my blog .