joepake/react-native-alphabet-flat-list

使用FlatList制作的react-native字母选择列表

       

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

• MIT