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 的样式部分