/react-native-alphabet-flat-list

react-native-alphabet-flat-list

Primary LanguageTypeScriptMIT LicenseMIT

   react-native-alphabet-flat-list    react-native-alphabet-flat-list

Alphabet FlatList

Installation

  • Using npm: npm install @yoonzm/react-native-alphabet-flat-list --save
  • Using Yarn: yarn add @yoonzm/react-native-alphabet-flat-list

Example

import React, {Fragment} from 'react';
import {StatusBar, Text, View} from 'react-native';
import AlphabetFlatList from "react-native-alphabet-flat-list";
import ContactItem, {CONTACT_ITEM_HEIGHT, IContact} from "./ContactItem";

...

const HEADER_HEIGHT = 50;

const App = () => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content"/>
      <AlphabetFlatList<IContact>
        data={data}
        itemHeight={CONTACT_ITEM_HEIGHT}
        headerHeight={HEADER_HEIGHT}
        renderItem={ContactItem}
        ListHeaderComponent={(
          <View style={{
            height: HEADER_HEIGHT,
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <Text>ListHeaderComponent</Text>
          </View>
        )}
      />
    </Fragment>
  );
};

Detail

Props

  • data(Object) [isRequire] - listData to display
  • itemHeight(Number) [isRequire] - itemComponent height
  • renderItem(Function) [isRequire] - itemComponent render
  • sectionHeaderHeight(Number) - sectionHeader height; default is 25
  • renderSectionHeader(Function) - sectionHeader
  • ListHeaderComponent(Function) - ListHeader
  • alphabetToast(Boolean) - click on the letter to prompt

Download

类型 二维码
Apk二维码
IOS暂无下载

License