react-native-masonry-layout
An easy to use, pure JS react-native component to render a masonry layout for any item view
Last updated a year ago by enok .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-masonry-layout 
SYNC missed versions from official npm registry.

react-native-masonry-layout

An easy to use, pure JS react-native component to render a masonry layout for any item view

中文文档

features

  • Full custom item view, Including style definition
  • Instead of adding a item per column, the optimal arrangement is automatically determined by the algorithm. Avoid the high gap in each column

preview

Usage

1.Install

npm

$ npm install --save react-native-masonry-layout

yarn

$ yarn add react-native-masonry-layout

2.Import

import Masonry from 'react-native-masonry-layout';

3.Render

<Masonry
  ref="masonry"
  columns={3} // optional - Default: 2
  renderItem={(item)=><View>
    <Text>some text</Text>
  </View>}
/>

Component Props

Props Type Description Default
columns number Desired number of columns 2
header View Add view in front of the masonry layout null
footer View Add view in behind the masonry layout null
containerStyle ViewStyle Defining the style of the container view null
renderItem func The method used to render each item null
keyExtractor func By default, the list looks for a key prop on each item and uses that for the React key. Alternatively, you can provide a custom keyExtractor prop. null

Other attributes are the same as ScrollView

Component Methods

addItems

Add Items to the Masonry component。The items height will be automatically calculated, and the item will be rendered one by one, and addItemsWithHeight should be used if it needs to be rendered in bulk

this.refs.masonry.addItems([
	{ key:1, text:"text1" },
	{ key:1, text:"text1" }
]);

addItemsWithHeight

Add items to masonry. Item height will be automatically calculated, but height attribute must be added to every item object data. This attribute is not the actual item rendering height, but a reference value for item assignment algorithm. Unlike addItems, items is rendered in bulk.

this.refs.masonry.addItems([
	{ key:1, text:"text1", height: 210 },
	{ key:1, text:"text1", height: 150 }
]);

clear

Clear the items of masonry.

this.refs.masonry.clear();

Current Tags

  • 1.0.6                                ...           latest (a year ago)

7 Versions

  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 1
Last Week 0
Last Month 7
Dependencies (0)
None
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |