Rnlist NPM | npm.io

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	文字附件