Колекції даних

Для відображення колекції однотипних даних (на кшталт списків користувачів, новин, посилань тощо) є два підходи. Який обрати - залежить від поставленої задачі та оцінки продуктивності.

Підходи:

• Компонент ScrollView + map

• Компонент FlatList

ScrollView + map

Як контейнер застосовують ScrollView, а всередині нього перебирають масив методом map.

App.js

import React, { useState } from "react";
import { StyleSheet, Text, ScrollView, SafeAreaView } from "react-native";

const FRIENDS = [
  {
    id: "001",
    name: "Alex",
  },
  {
    id: "002",
    name: "John",
  },
  {
    id: "003",
    name: "Mark",
  },
  {
    id: "004",
    name: "Andrew",
  },
];

export default function App() {
  const [friends, setFriends] = useState(FRIENDS);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        {friends.map((friend) => (
          <Text key={friend.id} style={styles.text}>
            {friend.name}
          </Text>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
  },
  text: {
    fontSize: 40,
  },
});

За таким принципом рендерять розмітку списків у веброзробці. Утім при такому способі вантажиться уся колекція одразу. Наприклад, якщо є тисяча елементів, то відображається на екрані невелика частина, а решта ховається за межами ScrollView. В такому разі контрпродуктивно вантажиться застосунок на марні задачі. Інша справа підвантажувати контент за потреби. Наступний спосіб.

FlatList

FlatList рендерить лише ту частину колекції, яку видно на екрані пристрою. Пешта контенту буде підванатжуватися, коли потрапить у вʼ.порт пристрою.

Основні пропси компоненту FlatList:

• data - приймає масив елементів

• renderItem - функція, яка бере послідовно по одному елемену із data та повертає відформатований компонент для візуалізації.

• keyExtractor - сюди передають унікальний ключ елемента колекції (аналогія key в map). ключ має бути рядком.

App.js

import React, { useState } from "react";
import { StyleSheet, Text, SafeAreaView, FlatList } from "react-native";

const FRIENDS = [
  {
    id: "001",
    name: "Alex",
  },
  {
    id: "002",
    name: "John",
  },
  {
    id: "003",
    name: "Mark",
  },
  {
    id: "004",
    name: "Andrew",
  },
];

export default function App() {
  const [friends, setFriends] = useState(FRIENDS);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={friends}
        renderItem={({ item }) => <Text style={styles.text}>{item.name}</Text>}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
  },
  text: {
    fontSize: 40,
  },
});

SectionList

Якщо потрібно відобразити набір даних, розбитих на логічні розділи, в такому разі зручно використовувати компонент SectionList.

App.js

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  SafeAreaView,
  SectionList,
  View,
} from "react-native";

const FRIENDS = [
  {
    title: "Girls",
    data: [
      {
        name: "Helga",
        phone: "12345678",
      },
      {
        name: "Gloria",
        phone: "12345678",
      },
      {
        name: "Samantha",
        phone: "12345678",
      },
      {
        name: "Samantha",
        phone: "12345678",
      },
    ],
  },
  {
    title: "Guys",
    data: [
      {
        name: "Alex",
        phone: "12345678",
      },
      {
        name: "John",
        phone: "12345678",
      },
      {
        name: "Mark",
        phone: "12345678",
      },
      {
        name: "Andrew",
        phone: "12345678",
      },
    ],
  },
];

export default function App() {
  const [friends, setFriends] = useState(FRIENDS);

  return (
    <SafeAreaView style={styles.container}>

      <SectionList
        sections={friends}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>Name: {item.name}</Text>
            <Text style={styles.phone}>Phone: {item.phone}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
  },
  header: {
    marginTop: 20,
    fontSize: 40,
    backgroundColor: "#f9c2ff",
  },
  item: { padding: 10 },
  text: {
    fontSize: 40,
  },
  phone: {
    fontSize: 20,
  },
});

Посилання на офіційну документацію:

List Views

FlatList

SectionList