weex-nuke/lib/node_modules/nuke-cell/readme.en.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Cell

- category: Components
- chinese: 列表项
- type: 基本

---

<a href="http://nuke.alibaba-inc.com/" target="_blank"> Nuke UI </a>


![nuke-cell@ALINPM](http://web.npm.alibaba-inc.com/badge/v/nuke-cell.svg?style=flat-square)  ![nuke-cell@ALINPM](http://web.npm.alibaba-inc.com/badge/d/nuke-cell.svg?style=flat-square)

## Design

`Cell` component implements native row item of a repeatable data list.

## Usage

`Cell` must be used as a sub component of list-like-component , like `ListView` `WaterFall`,etc.

Normally, Nuke wraps each list item with a `Cell` component when using dataSource mode :

```js
// if you use listview datasource like this :
<ListView
  renderRow={(item,index)=>{return (<Text>{item}</Text>)}}
  dataSource={["a","b"]}
/>
// Nuke transform it into :
<ListView>
  {["a","b"].map((item,index)=>{
    return (
      <Cell>
        <Text>{item}</Text>
      </Cell>
      )
  })}
</ListView>
```

 Or you can add `Cell` component yourself with `_autoWrapCell={false}`

```js
<ListView _autoWrapCell={false}>
{
  ["a","b"].map((item,index)=>{
    return (
      <Cell key={`id_${item.id}`}>
        //... your code
      </Cell>
    )
  })
}
</ListView>
```

## API

| Props              | Description                                                                                     | type    | default |
| ------------------ | ----------------------------------------------------------------------------------------------- | ------- | ------- |
| append             | render item mode, useful when a cell is really large, can be `tree` `node`                      | String  | tree    |
| keepScrollPosition | keep current scroll position, usefull when you prepend data in a list. **Only works in Native** | boolean | false   |
| key                | identity key of a cell                                                                          | String  |

## demo 参考

<img src="https://img.alicdn.com/tfs/TB1TnjiX3MPMeJjy1XdXXasrXXa-1242-2208.png" width="240" />

扫码预览(手淘、千牛、天猫等)

<img src="https://img.alicdn.com/tfs/TB1pqnsX3oQMeJjy1XaXXcSsFXa-280-280.png" width="160" />