[RN] react-native-swipe-list-view 설치 및 사용법

react-native-swipe-list-view를 사용하면, 카카오톡 친구목록 리스트나, 채팅목록 리스트에 적용되어 있는 형태의 스와이프 리스트를 구현할 수 있습니다.

 

설치

npm install --save react-native-swipe-list-view 
// or yarn add react-native-swipe-list-view

 

for ios

cd ios 
pod instll

 

사용법

react-native-swipe-list-view를 사용하기 위해 아래와 같이 라이브러리를 불러옵니다.

import {SwipeListView} from 'react-native-swipe-list-view';

SwipeListView 컴포넌트는 다음과 같이 사용할 수 있습니다.

const App = () => {
  return (
    <SwipeListView
    	data={LIST_VIEW_DATA}  
        // 어떻게 아이템을 렌더링 할 것인가
    	renderItem={(data, rowMap) => (
    	    <View style={styles.rowFront}>
                <Text>I am {data.item.text} in a SwipeListView</Text>
    	    </View>
        )}
        // 어떻게 숨겨진 아이템을 렌더링 할 것인가
    	renderHiddenItem={(data, rowMap) => (
    	    <View style={styles.rowBack}>
    	        <Text>Left</Text>
    	        <Text>Right</Text>
    	    </View>
        )}
    	leftOpenValue={70} // 왼쪽으로 스와이프 했을 때, 열리는 넓비
    	rightOpenValue={-70} // 오른쪽으로 스와이프 했을 때, 열리는 넓비
    />
  ) 
}

이를 이용해서 상단의 사진과 같이 아주 간단한 형태의 스와이프 리스트를 구현해보았습니다. 전체 소스 코드는 다음과 같습니다. 개발 시, 도움이 되시길 바랍니다. :)

[전체 소스 코드]

import React, {useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {SwipeListView} from 'react-native-swipe-list-view';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textContainer: {
    width: '100%',
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  styledText: {
    color: '#111',
    fontWeight: 'bold',
  },
  swipeListItem: {
    alignItems: 'center',
    borderBottomColor: '#fff',
    borderBottomWidth: 1,
    justifyContent: 'center',
    height: 50,
    backgroundColor: '#eee',
  },
  swipeHiddenItemContainer: {
    flex: 1,
    height: '100%',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'white',
    flexDirection: 'row',
  },
  swipeHiddenItem: {
    width: 70,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  swipeHiddenItemText: {
    color: 'white',
    fontSize: 14,
  },
});

const LIST_VIEW_DATA = Array(5)
  .fill('')
  .map((_, i) => ({key: `${i}`, text: `item #${i}`}));

export default () => {
  const [text, setText] = useState('Not Pressed');

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.styledText}>{text}</Text>
      </View>

      <SwipeListView
        data={LIST_VIEW_DATA}
        renderItem={({item}) => (
          <View style={styles.swipeListItem}>
            <Text>{item.text}</Text>
          </View>
        )}
        renderHiddenItem={(data, rowMap) => (
          <View style={styles.swipeHiddenItemContainer}>
            <TouchableOpacity
              onPress={() => setText(`${data.item.text} left is pressed`)}>
              <View style={[styles.swipeHiddenItem, {backgroundColor: 'pink'}]}>
                <Text style={styles.swipeHiddenItemText}>left</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => setText(`${data.item.text} right is pressed`)}>
              <View
                style={[styles.swipeHiddenItem, {backgroundColor: 'skyblue'}]}>
                <Text style={styles.swipeHiddenItemText}>right</Text>
              </View>
            </TouchableOpacity>
          </View>
        )}
        leftOpenValue={70}
        rightOpenValue={-70}
      />
    </SafeAreaView>
  );
};

 

[참고 자료]

react-native-swipe-list-view