Skip to content
使用FlatList制作的react-native字母选择列表
Branch: master
Clone or download
yin
yin README
Latest commit 4c89fae Apr 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshot
.gitignore
AlphabetListView.js
LICENSE
README.md
SWAlphabetFlatList.js
SectionHeader.js
SectionListItem.js
index.d.ts
index.js
package.json README Apr 13, 2019

README.md

   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, { Component } from 'react';
import { Text, View } from 'react-native';
import SWAlphabetFlatList from '@yoonzm/react-native-alphabet-flat-list';

const CONTACTS = {
  A: ['Any', 'Avatar'],
  B: ['Basketball', 'Big']
};

const ITEM_HEIGHT = 50;

class Example extends Component {
  render() {
    return (
      <SWAlphabetFlatList
        data={CONTACTS}
        renderItem={({ item }) => (
          <View style={{ height: ITEM_HEIGHT }}>
            <Text>{item}</Text>
          </View>
        )}
        itemHeight={ITEM_HEIGHT}
      />
    );
  }
}

Props

  • data(Object) [isRequire] - listData to display
  • itemHeight(Number) [isRequire] - itemComponent height
  • renderItem(Function) [isRequire] - itemComponent render
  • sectionHeaderHeight(Number) - sectionHeader height; default is 25
  • sectionHeaderComponent(Component) - sectionHeader

License

You can’t perform that action at this time.