# Cell Demo

- order: 0

Cell 需要和 ListView 配合使用。

---

````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","列表8","列表9"]
        };
    }
    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 />);

````