# Cell

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

---


## 何时使用

我们通常使用 `ListView` 组件渲染一个长列表，`Cell` 是指其中的列表项。 

本质上，`Cell` 是一个容器节点，与 `View` 不同的是，`Cell` 只能作为 `ListView` 的子组件使用。



```js
// 以下展示 2 种使用方式
//  ListView 的 dataSource 用法，每一个 renderItem 渲染出的节点，会被自动包裹 `Cell` ，开发者无需再自行添加。
<ListView
    renderRow={this.renderItem.bind(this)}
    dataSource={this.state.data}

/>

// ListView 自己渲染 Cell 的用法 , 需给 ListView 添加 _autoWrapCell={false} 。
<ListView _autoWrapCell={false} style={styles.listContainer}>
{
    this.state.data.map((item,index)=>{
        return (
            <Cell key={`id_${item.id}`}>
            {this.renderItem(item,index)}
            </Cell>
        )
    })
}
</ListView>

```

## API

| 参数               | 说明                                                                                           | 类型    | 默认值 |
| ------------------ | ---------------------------------------------------------------------------------------------- | ------- | ------ |
| append             | 渲染模式，可选 `tree` `node`                                                                   | String  | tree   |
| keepScrollPosition | 当 ListView 的数据变化，需要在头部 append 时，是否保持当前 cell 的滚动位置，**仅 Native 有效** | boolean | false  |
| key                | 每个Cell 都必须要有 key，便于 ListView 复用                                                    | 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" /> 


## 使用方法

- 安装

```bash
// 切换到你的 rax 项目中
tnpm i nuke-cell --save
// 参考如下 demo 您可能还需要安装
// tnpm i nuke-view nuke-text nuke-list-view --save
```

- 调用示例

```js
/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ListView from 'nuke-list-view';
import Cell from 'nuke-cell';

class Demo extends Component {
    constructor() {
        super();
        this.state = {
            data: ["列表1","列表2","列表3","列表4","列表5","列表6","列表7"]
        };
    }
    render(){
        return (
            <ListView _autoWrapCell={false} showScrollbar={false} style={styles.listContainer}>
            {
                this.state.data.map((item,index)=>{
                    return (
                        <Cell key={`cell_${index}`}>
                            <View style={[styles.cellItem]}>
                                <Text style={styles.text}>{item}</Text>
                            </View>
                        </Cell>
                    )
                })
            }
            </ListView>
        )
    }
}
const styles = {
    listContainer : {
        flex : 1
    },
    cellItem : {
        width: '750rem',
        height: '200rem',
        paddingTop:'20rem',
        flexDirection:'row',
        borderBottomWidth:'1rem',
        borderBottomStyle:'solid',
        borderBottomColor:'#cccccc',
        justifyContent:'center',
        alignItems:'center'
    },
    text:{
        color:'#666666'
    }
}
render(<Demo />);
```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />