Sử dụng chế độ xem danh sách trong React Native

Thành FlatListphần hiển thị danh sách cuộn các dữ liệu thay đổi, nhưng có cấu trúc tương tự. FlatListhoạt động tốt cho danh sách dữ liệu dài, trong đó số lượng mục có thể thay đổi theo thời gian. Không giống như các phần tử chung chung hơn ScrollView, các FlatListphần tử chỉ hiển thị các phần tử hiện đang hiển thị trên màn hình, không phải tất cả các phần tử cùng một lúc.

Thành FlatListphần yêu cầu hai đạo cụ: datavà renderItem. datalà nguồn thông tin cho danh sách. renderItemlấy một mục từ nguồn và trả về một thành phần được định dạng để hiển thị.

Ví dụ này tạo cơ bản FlatListvề dữ liệu được mã hóa cứng. Mỗi mục trong datađạo cụ được hiển thị như một Textthành phần. Sau FlatListBasicsđó, thành phần hiển thị FlatListvà tất cả các Textthành phần.

>>> Đọc thêm: Laravel Controllers - Tìm hiểu về bộ điều khiển trong Laravel

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

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

export default FlatListBasics;

Nếu bạn muốn hiển thị một tập hợp dữ liệu được chia thành các phần hợp lý, có thể với tiêu đề phần, tương tự như UITableViews trên iOS, thì SectionList là cách để thực hiện.

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

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => `basicListEntry-${item.title}`}
        />
      </View>
    );
}

export default SectionListBasics;

Một trong những cách sử dụng phổ biến nhất cho chế độ xem danh sách là hiển thị dữ liệu mà bạn tìm nạp từ máy chủ. Để làm được điều đó, bạn sẽ cần tìm hiểu về mạng trong React Native .