Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
我们通常使用 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>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
append | 渲染模式,可选 tree node | String | tree |
keepScrollPosition | 当 ListView 的数据变化,需要在头部 append 时,是否保持当前 cell 的滚动位置,仅 Native 有效 | boolean | false |
key | 每个Cell 都必须要有 key,便于 ListView 复用 | String |
扫码预览(手淘、千牛、天猫等)
// 切换到你的 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 />);
FAQs
cell列表项
We found that nuke-cell demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.