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(); 메소드가 실행하여 열려져 있는 스와이프 상태를 원래대로 돌려 놓는다.