nuke-cell

Cell

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

---

Nuke UI

何时使用

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

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

// 以下展示 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 参考

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

使用方法

• 安装

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

• 调用示例

/** @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、建议联系 @翊晨
• 钉钉交流群