react native - Swipeable 의 속성과 메소드들

react-native-gesture-handler 를 설치한 뒤 Swipeable 로 스와이핑 버튼을 만들어서 쓰고 있다.
그 중 몇가지 쓰는 것들을 적어 놓으려고 한다.
const LeftComp = () =>( <View style={{width: 100,backgroundColor: "#FFF"}}/> );
const RightComp = () =>( <View style={{width: 100,backgroundColor: "#000"}}/> );

<Swipeable
    renderRightActions={ RightComp  }
    renderLeftActions={ LeftComp }
    overshootRight = { true }
    overshootLeft = { true }
    onSwipeableWillOpen = { (dir) => {
    if(dir === "right"){
        alert("오른쪽 스와이프함")
    }
}}
> ...

이렇게 예시를 작성하고 설명드리면,

  • renderRightActions : 오른쪽에서 스와이프 했을 때 보여질 컴포넌트이다. 위 예제처럼 컴포넌트 변수명을 바로 넣어도 되고 값을 넘겨서 사용할 경우에는 예를 들어 renderRightActions={ () => <RightComp aaa={ aaa }/> } 이렇게 사용하기도 한다.
  • renderLeftActions : 왼쪽에서 스와이프 했을 때 보여질 컴포넌트이다.
  • overshootRight : renderRightActions 에서 지정한 컴포넌트의 크기를 넘어서까지 스와이프 시킬 수 있는 지 true / false 로 지정할 수 있다.
  • overshootLeft : renderLeftActions 에서 지정한 컴포넌트의 크기를 넘어서까지 스와이프 시킬 수 있는 지 true / false 로 지정할 수 있다.
  • onSwipeableWillOpen : 스와이프가 진행되었을 때 함수를 실행시킬 수 있으며 예제처럼 값을 전달 받는데 값이 left 또는 right로 들어온다. 오른쪽에서 스와이프하면 right로 들어온다.

제공 되는 메소들로는 스와이프 상태를 직접적으로 왼쪽 또는 오른쪽으로 스와이프 한 효과를 실행시키거나 닫을 수 있다.

const swipeRef = useRef();
const openRight = () => { swipeRef.current.openRight(); }
const closeSwipe = () => { swipeRef.current.close(); }
<Swipeable
    ref = { swipeRef}
> ...
<BaseButton onPress= { () => openRight() }> ...
<BaseButton onPress= { () => closeSwipe() }> ...
  • 예제에서 만든 openRight 함수를 호출하면 .openRight(); 메소드가 실행하여 오른쪽에서 스와이프가 실행된다. 왼쪽에서 실행하려면 .openLeft(); 를 사용하면 된다.
  • 예제에서 만든 closeSwipe 함수를 실행하면 .close(); 메소드가 실행하여 열려져 있는 스와이프 상태를 원래대로 돌려 놓는다.
Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP