current position:Home>Reactnative foundation - 11 (flatlist component, core attributes data, renderitem, keyextractor, split component, head component, tail component)

Reactnative foundation - 11 (flatlist component, core attributes data, renderitem, keyextractor, split component, head component, tail component)

2022-01-27 03:23:25 The black cat made a strange mistake

FlatList The component supports drop-down refresh 、 Bottom touch loading 、 Back to the top 、 Head 、 Tail Unit 、 The row splitting component waits

1、 Core attributes :

        data: Array data to be displayed

        renderItem: The interface corresponding to each element of the array ui Style of label ( label )

        keyExtractor: Every ui Unique identification of

export default class App extends Component {
  skills = ['vue','react','angluar','jquery','uni-app'];
  // Splicing ui label ,{index, item} Deconstruct incoming data 
  _renderItem = ({index, item}) => (
    <Text>{index} - {item}</Text>
  );
  // Non deconstruction , It's like this :
  _renderItem1 = data => {
    const {index, item} = data;
    return (
      <Text>{index} - {item}</Text>
    );
  };
  render() {
    return (
      <FlatList
        data={this.skills}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index}>
</FlatList>
    );
  }
}

2、 Optional attribute :

        ItemSeparatorComponent: Split components ( Every list Segmentation , It can usually be used to write split lines )

        ListHeaderComponent: Head assembly

        ListFooterComponent: Tail Unit

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

export default class App extends Component {
  heros = [
    {name: ' Ann ', job: ' teacher ', price: 999},
    {name: ' Bobo ', job: ' Student ', price: 1001},
    {name: ' Chou Chou ', job: ' To move the brick ', price: 899},
    {name: ' toot toot ', job: ' pig ', price: 666},
    {name: ' beautiful ', job: ' And cement ', price: 555},
  ];
  _renderItem = ({item, index}) => (
    <Text
      style={
   {
        fontSize: 26,
        padding: 5,
      }}>
      {index + 1}、{item.name} - {item.job} - ¥{item.price}
    </Text>
  );
  // Split line 
  _ItemSeparatorComponent = () => (
    <View
      style={
   {
        height: 10,
        borderBottomWidth: 1,
        borderBottomColor: 'gray',
      }}></View>
  );
  // Head 
  _ListHeaderComponent = () => (
    <Text style={
   {fontSize: 30, color: 'red', textAlign: 'center'}}>
       The heroes of this bureau :
    </Text>
  );
  // The tail 
  _ListFooterComponent = () => (
    <Text style={
   {fontSize: 26, color: 'blue'}}> This field 5 A hero </Text>
  );
  render() {
    return (
      <FlatList
        data={this.heros}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={this._ItemSeparatorComponent}
        ListHeaderComponent={this._ListHeaderComponent}
        ListFooterComponent={this._ListFooterComponent}></FlatList>
    );
  }
}

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270323234216.html

Random recommended