Cell

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

Nuke UI

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 :

// 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}

<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 参考

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