# Header Demo

- order: 0

Header 需要和 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';
import Header from 'nuke-header';

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}>
                <Header style={styles.header}>
                    <View style={styles.dataHeaderItem}><Text style={styles.headerText}>表头</Text></View>
                </Header>
            {
                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
    },
    header:{
        width:'750rem',
        backgroundColor:'#ff6600',
        height:'100rem',
        justifyContent:'center',
        alignItems:'center',
    },
    headerText:{
        color:'#ffffff'
    },
    cellItem : {
        width: '750rem',
        height: '300rem',
        paddingTop:'20rem',
        flexDirection:'row',
        borderBottomWidth:'1rem',
        borderBottomStyle:'solid',
        borderBottomColor:'#cccccc',
        justifyContent:'center',
        alignItems:'center'
    },
    text:{
        color:'#666666'
    }
}
render(<Demo />);


````