React Native Flatlist: Panduan Lengkap – Codewithaden

Ada beberapa cara untuk membuat daftar gulir Bereaksi asli, dan Terutama, mereka telah menjadi Gulir dan Flatlist

Bereaksi flatlist asli

React Native Flatlist adalah komponen bawaan yang digunakan untuk membuat daftar data gulir yang efisien. Ada dua alat peraga utama yang perlu Anda ketahui di Flatlist, dan itu data dan renderitem . Yang pertama adalah array data yang digunakan untuk membuat daftar, biasanya array objek. Yang kedua adalah fungsi yang akan mengambil elemen individual dari array data dan membuat komponen.

Komponen flatlist adalah cara mudah untuk membuat daftar data gulir yang efisien. Tidak hanya praktis, tetapi juga ada API untuk dikerjakan.

Jika Anda telah menggunakan atau terbiasa dengan komponen ListView, itu sangat mirip, hanya lebih baik dalam (hampir) setiap cara. ? Anda tidak lagi harus memformat data – Anda dapat meneruskannya serangkaian data untuk segera rendering.

Itu Flatlist Menawarkan fitur praktis berikut.

Bereaksi fitur flatlist asli

  1. Sepenuhnya lintas platform.
  2. Mode horizontal opsional.
  3. Panggilan balik yang dapat dikonfigurasi dapat dikonfigurasi.
  4. Dukungan header.
  5. Dukungan footer.
  6. Dukungan Pemisah.
  7. Tarik untuk menyegarkan.
  8. Gulir pemuatan.
  9. Dukungan ScrollToIndex.

Seperti biasa, kami akan memulai tutorial ini dengan menginstal React Native on Mac menggunakan react-native-cli.

Langkah 1: Instal React Native di Mac

Pergi ke terminal dan tekan perintah berikut.

react-native init FlatListApp 

Ini akan menginstal dependensi dan memberikan beberapa boilerplate. Masuk ke direktori proyek.

cd FlatListApp 

Sekarang, mulailah manajer paket dan simulator dengan perintah berikut. Saya menggunakan iPhone X sebagai simulator.

react-native run-ios --simulator="iPhone X" 

Pertama kali, ini akan memakan waktu 2-3 menit untuk dikompilasi, dan kemudian Anda dapat melihat di layar iPhone X Anda seperti gambar di bawah ini.

React Langkah 2: Buat data sampel dan server.

Kami membutuhkan data palsu untuk bekerja dengan contoh react native flatlist; Itulah mengapa saya menggunakan satu paket yang dipanggil json-server untuk tutorial ini. Oke, jadi mari kita menginstal paket menggunakan paket paket benang.

yarn add json-server 

Oke, sekarang kita perlu membuat satu folder ditelepon data Di dalam folder root, dan di dalam folder itu, buat satu file yang dipanggil db.json. Mari kita tambahkan data berikut di db.json file untuk tujuan pengujian.

{
    "users": 
        [
            {
                "name": "Proxima Midnight",
                "email": "proxima@appdividend.com"
            },
            {
                "name": "Ebony Maw",
                "email": "ebony@appdividend.com"
            },
            {
                "name": "Black Dwarf",
                "email": "dwarf@appdividend.com"
            },
            {
                "name": "Mad Titan",
                "email": "thanos@appdividend.com"
            },
            {
                "name": "Supergiant",
                "email": "supergiant@appdividend.com"
            },
            {
                "name": "Loki",
                "email": "loki@appdividend.com"
            },
            {
                "name": "corvus",
                "email": "corvus@appdividend.com"
            },
            {
                "name": "Proxima Midnight",
                "email": "proxima1@appdividend.com"
            },
            {
                "name": "Ebony Maw",
                "email": "ebony1@appdividend.com"
            },
            {
                "name": "Black Dwarf",
                "email": "dwarf1@appdividend.com"
            },
            {
                "name": "Mad Titan",
                "email": "thanos1@appdividend.com"
            },
            {
                "name": "Supergiant",
                "email": "supergiant1@appdividend.com"
            },
            {
                "name": "Loki",
                "email": "loki1@appdividend.com"
            },
            {
                "name": "corvus",
                "email": "corvus1@appdividend.com"
            }
        ]
} 

Oke, jadi sekarang ini adalah file, JSON-Server akan server saat kami menekan permintaan jaringan. Jadi ketik perintah berikut untuk memulai json-server

json-server

Beralih ke browser dan pergi ke UR ini L: http://localhost:5200/users

Anda dapat melihat bahwa kami menerima respons JSON dari itu db.json mengajukan.

Langkah 3: Buat layanan yang mengambil data dari server.

Di folder root, buat satu folder dipanggil ke melayani, Dan di folder itu, buat satu file yang dipanggil Fetchdata.js.

// FetchData.js

const URI = 'http://localhost:5200';

export default {
    async fetchUsers() {
        try {
                let response = await fetch(URI + '/users');
                let responseJsonData = await response.json();
                return responseJsonData;
            }
        catch(e) {
            console.log(e)
        }
    }
} 

Mengambil adalah perpustakaan jaringan yang disediakan oleh React Native. Ini adalah sebuah berbasis janji Perpustakaan, jadi kita harus menunggu untuk menyelesaikannya. Di sini kami telah menggunakan async/menunggu

Langkah 4: Ubah file App.js untuk menampilkan data pengguna.

Kami akan menampilkan data pengguna di FlatList.

// App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList
} from 'react-native';
import ajax from './service/FetchData';

export default class App extends Component {

  state = {
    users: []
  }

  async componentDidMount() {
    const users = await ajax.fetchUsers();
    this.setState({users});
  }


  render() {
    return (
      
        
          Black Order
        
          
          
            {item.name}
            {item.email}
          
          }
          keyExtractor={item => item.email}
        />
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  h2text: {
    marginTop: 10,
    fontFamily: 'Helvetica',
    fontSize: 36,
    fontWeight: 'bold',
  },
  flatview: {
    justifyContent: 'center',
    paddingTop: 30,
    borderRadius: 2,
  },
  name: {
    fontFamily: 'Verdana',
    fontSize: 18
  },
  email: {
    color: 'red'
  }
  
}); 

Dengan itu selesai, Anda dapat melanjutkan dan mulai memberikan data. Untuk melakukannya, hal pertama yang ingin Anda lakukan adalah impor {stylesheet, teks, tampilan, flatlist} dari ” bereaksi asli, “; Jadi, Anda memiliki komponen yang diperlukan untuk membuat data.

Sisa pekerjaan akan berlangsung dalam metode render. Tapi pertama-tama , kami telah mengambil data dari server dan kemudian mengatur status pengguna.

Flatlist mengkonsumsi data pengguna itu melalui this.state.users.

Maka Anda ingin membuat konten dengan renderitem menopang. Sekali lagi, fungsi melewati satu argumen, suatu objek.

Data yang Anda minati ada di barang kunci, sehingga Anda dapat menggunakan perusak untuk mengaksesnya dari dalam fungsi. Kemudian kembalikan komponen menggunakan data itu.

Jika Anda menemukan peringatan bahwa elemen daftar adalah kunci yang hilang, kunci unik ini memungkinkan Daftar Virtualisasi (yang dibangun oleh flatlist) untuk melacak item dan membantu dalam efisiensi daftar. Saya tidak akan terjun ke dalamnya, tetapi saya tahu itu penting.

Untuk mengurangi masalah ini, Anda ingin memilih sepotong data yang unik untuk setiap item. Dalam hal ini, Anda dapat menggunakan alamat email pengguna karena itu akan unik untuk setiap item.

Anda kemudian dapat menggunakan KeyExtractor Prop untuk menentukan bagian data mana yang harus digunakan sebagai kunci.

Jadi, kami telah mendefinisikan kunci unik dari data kami.

Saya telah menyembunyikan scrollbar vertikal menggunakan properti showVerTicalScrollIndicator = {false}. Jadi kami Output akhir terlihat seperti ini. FlatList

Itulah untuk Bereaksi contoh flatlist asli.

Posting yang disarankan

Bereaksi komponen gesek asli

Bereaksi navigator laci asli

Bereaksi Tampilan Tab Asli

Navigasi asli menggunakan navigasi asli bereaksi

Bereaksi redux asli

Bereaksi modal asli

Bereaksi asli membuat hapus

Bereaksi animasi asli

Bereaksi Firebase Asli

Bereaksi Flexbox asli

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *