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二维码 |
![](https://github.com/yoonzm/react-native-alphabet-flat-list/raw/master/download.png?raw=true) |
IOS暂无下载 |
|
License