RNList
基础列表模板
使用
import RNList from 'rnlist'
// 与 FlatList 使用
<FlatList
data={list}
renderItem={({item, index}) =>
<RNList data={item} style={listStyle}/>
}
keyExtractor={(item, index) => index}
>
</FlatList>
// 列表自定义样式
const listStyle = StyleSheet.create({
list: {
height: 52,
},
// 文字主体
txtBox: {
flex: 1,
},
// 标题
title: {
fontSize: 14,
color: '#666',
fontWeight: 'normal'
},
// 附件信息
accessoryBox: {
flex: 3,
},
// 文字附件
accessoryTxt: {
fontSize: 14,
color: '#333'
}
})
样式参数
参数 |
类型 |
说明 |
data |
Object |
显示内容 |
style |
Style |
自定义样式 |
that |
Object |
原对象 this |
callback |
Function |
自定义函数,返回 this |
data 参数内容
参数 |
类型 |
说明 |
icon |
String |
图标 |
title |
String |
标题 |
subTitle |
String |
副标题 |
preview |
String |
预览信息 |
accessory |
Object |
附件信息 |
separator |
List |
箭头 |
preview 预览
参数 |
类型 |
说明 |
line |
Number |
用于规定显示的行数 |
inner |
String |
显示的内容 |
accessory 附件
参数 |
类型 |
说明 |
type |
List |
用于规定显示的类型,可选 ['text','img','Image'] |
inner |
String |
显示的内容 |
type: "Image" 的图片引用为 inner: require('./img/yourImg.png')
separator 箭头
参数 |
类型 |
说明 |
up |
String |
显示向上的箭头 |
down |
String |
显示向下的箭头 |
left |
String |
显示向左的箭头 |
right |
String |
显示向右的箭头 |
Style 自定义样式
参数 |
说明 |
list |
盒子 |
line |
下划线 |
body |
主体 |
iconBox |
图标盒子 |
icon |
图标 |
txtBox |
文字主体 |
title |
标题 |
subTitle |
副标题 |
preview |
预览信息 |
accessoryBox |
附件信息 |
accessoryImg |
图片附件 |
accessoryTxt |
文字附件 |
具体可以查看� index.js 的样式部分