리액트 네이티브 누를 수 있는 하이라이트

파급 효과가 있는 iOS 및 Android 모두에서 TouchableHighlight와 유사한 것을 사용하려면 어떻게 해야 합니까? Pressable 구성 요소를 사용하는 것만으로는 충분하지 않으므로 iOS의 배경 강조 표시 변경과 Android의 파급 효과를 모두 처리하는 PressableHighlight 구성 요소를 만들 수 있습니다.

여기에서 코드를 찾을 수 있습니다snack.



요구 사항:

iOS의 경우 배경 하이라이트 onPress

Android의 경우 파급 효과

PressableHighlight 구성 요소

export default function PressableHighlight(props) {
  return (
    <Pressable
      android_ripple={{
        color: '#676B5F',
      }}
      style={({ pressed }) => [
        Platform.select({
          ios: {
            backgroundColor: pressed ? 'rgba(0,0,0,0.1)' : 'transparent',
          },
        }),
        props.style,
      ]}>
      {props.children}
    </Pressable>
  );
}

android_ripple은 잔물결 색상을 허용하는 객체를 사용합니다. onPress 이벤트는 backgroundColor를 변경하는 데 사용할 수 있습니다. 이 경우 누를 때는 불투명도가 10%이고 비활성 상태일 때는 투명합니다.