[react-native] 카드 나열하기 - FlatList

import React from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions } from 'react-native';

const DATA = [
  { id: '1', title: '카드 1', company: '회사명 1', description: '공고제목 1', deadline: '마감일자 1' },
  { id: '2', title: '카드 2', company: '회사명 2', description: '공고제목 2', deadline: '마감일자 2' },
];

const { width } = Dimensions.get('window');

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.card}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.company}>{item.company}</Text>
      <Text style={styles.description}>{item.description}</Text>
      <Text style={styles.deadline}>{item.deadline}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
    />
  );
};

const styles = StyleSheet.create({
  card: {
    width: width * 0.8,
    margin: width * 0.1,
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  company: {
    fontSize: 18,
    marginTop: 10,
  },
  description: {
    fontSize: 16,
    marginTop: 5,
  },
  deadline: {
    fontSize: 14,
    marginTop: 5,
    color: 'gray',
  },
});

export default App;

 

FlatList 컴포넌트를 사용하여 수평으로 카드형식의 리스트를 만든 후,
pagingEnabled로  카드 하나씩 넘길 수 있도록 한다.
horizontal : 수평 스크롤을 추가
showsHorizontalScrollIndicator 속성을 false로 설정하여 스크롤 바 숨기기

 

하나씩 넘기지 않고 그냥 자유롭게 스크롤 하려면 아래처럼 한다.

import React from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions } from 'react-native';

const DATA = [
  { id: '1', title: '카드 1', company: '회사명 1', description: '공고제목 1', deadline: '마감일자 1' },
  { id: '2', title: '카드 2', company: '회사명 2', description: '공고제목 2', deadline: '마감일자 2' },
];

const { width } = Dimensions.get('window');

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.card}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.company}>{item.company}</Text>
      <Text style={styles.description}>{item.description}</Text>
      <Text style={styles.deadline}>{item.deadline}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      horizontal
      contentContainerStyle={styles.contentContainer}
      showsHorizontalScrollIndicator={false}
      snapToAlignment="start"
      decelerationRate="fast"
    />
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    paddingHorizontal: 10,
  },
  card: {
    width: width * 0.8,
    marginRight: 10,
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  company: {
    fontSize: 18,
    marginTop: 10,
  },
  description: {
    fontSize: 16,
    marginTop: 5,
  },
  deadline: {
    fontSize: 14,
    marginTop: 5,
    color: 'gray',
  },
});

export default App;

 

pagingEnabled를 제거하여 드래그하는 만큼 스크롤 되도록 하면 됨.
contentContainerStyle : 리스트의 왼쪽 패딩을 설정
snapToAlignment와 decelerationRate를 사용하면 좀 더 자연스러운 스크롤링 효과를 줄 수 있다.