์๋ ํ์ธ์ Foma ์ ๋๋ค.
์ค๋์ React-Native์์ ์ปดํฌ๋ํธ๋ฅผ ์ค์์ดํ ํ์ ๋ ์ญ์ ๋ฒํผ์ด ๋์ค๋ ๊ธฐ๋ฅ์ ์ ๋ฆฌํด ๋ณด๋ ค๊ณ ํฉ๋๋ค.
๋ฐ๋ก ์์ํ ๊ฒ์~
Preview
Install
npm install --save react-native-gesture-handler
Screen.tsx
import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler';
์ค๋ฅธ์ชฝ์ ๋ค์ด๊ฐ Delete ๋ฒํผ์ ๋ง๋ค์ด ์ค๋๋ค.
dragX๋ฅผ ๋ฐ์์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํ๊ณ , id์ List์ index๋ฅผ ๋ฐ์์ ๋ฒํผ์ ๋๋ ์ ๋ ํด๋น index๋ฅผ ์ถ๋ ฅํด ๋ณด๊ฒ ์ต๋๋ค.
const renderRightActions = (dragX, index) => {
const trans = dragX.interpolate({
inputRange: [0, 50, 100, 101],
outputRange: [-20, 0, 0, 1],
});
return (
<Pressable onPress={() => console.log(index)}>
<Animated.Text
style={[
styles.delete,
{
transform: [{translateX: trans}],
},
]}>
Delete
</Animated.Text>
</Pressable>
);
};
View
์๋์ ๊ฐ์ด GestureHandlerRootView๋ก ํ๋ฒ ๊ฐ์ธ์ฃผ๊ณ ,
Swipable ์ปดํฌ๋ํธ๋ก ์ค์์ดํ๊ฐ ๊ฐ๋ฅํ๊ฒ ํ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ ์ค๋๋ค.
renderRightActions: ์ปดํฌ๋ํธ๋ฅผ ์ค์์ดํ ํ์ ๋ ์ค๋ฅธ์ชฝ ์ก์ ์ด ๋์ค๋๋ก ํ๋ ํ๋ผ๋ฏธํฐ
ํด๋น ํ๋ผ๋ฏธํฐ์ ์์์ ๋ง๋ค์ด ์ค renderRightActions๋ฅผ ๋ฃ์ด์ฃผ๋๋ฐ, dragX๋ ์ค์์ดํ(drag) ํ์ ๋ x์ ์์น์ ํ์ฌ ๋ฆฌ์คํธ์ id๊ฐ์ ๋ณด๋ด์ค๋๋ค.
<FlatList
...
renderItem={({item, index}) => (
<GestureHandlerRootView>
<Swipeable
renderRightActions={dragX => renderRightActions(dragX, index)}>
<ChatRoomCell chatRoom={item}></ChatRoomCell>
</Swipeable>
</GestureHandlerRootView>
)}
/>
Delete ๋ฒํผ์ ๋๋ฅด๋ฉด ๋ฆฌ์คํธ์ ์ธ๋ฑ์ค๊ฐ ์ ์์ ์ผ๋ก ์ถ๋ ฅ๋ฉ๋๋ค.
๋๊ธ