Code mẫu sử dụng Flatlist trong React native

Trong ví dụ này sẽ sử dụng dữ liệu ở trong một biến mảng cục bộ, khi có tương tác API thì có thể thay thế mảng bằng dữ liệu lấy từ API về là hiển thị được.

Các component được import vào ứng dụng:

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

Bước 1: Tạo dữ liệu nguồn

const DATA = [
  {
    id: '1',
    ten_sp: 'First Item',
  },
  {
    id: '2',
    ten_sp: 'Second Item',
  },
  {
    id: '3',
    ten_sp: 'Third Item',
  } 
];

Sau này lấy dữ liệu từ API về chỉ cần thay thế vào biến DATA và tùy chỉnh hiển thị cho từng dòng là được.

Bước 2: Tạo component để hiển thị dòng

const Item = ({sp}) => (
  <View style={styles.item}>
        <Text style={styles.title}>{sp.ten_sp}</Text>
        <Text style={styles.title}>{sp.id}</Text>
  </View>
);

Component này dùng để tùy chỉnh nội dung cho từng dòng. Nếu có tương tác gì với từng dòng thì viết code ở trong component này.

Bước 3: Trong hàm App sử dụng component Flatlist

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({item}) => <Item sp={item} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};
export default App;

Trong thẻ FlatList cần chú ý phải có tối thiểu 3 thuộc tính: data, renderItem, keyExtractor

– data: là danh sách dữ liệu

– renderItem: Chỉ định component sẽ trình bày từng dòng

– keyExtractor: chỉ định một giá trị dùng để phân biệt giữa các dòng, thông thường là ID của phần tử trong danh sách DATA

Bước 4: Định nghĩa style

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});