# rnlist

> react native list

Latest version **0.0.12** (published 2018-02-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install rnlist
pnpm add rnlist
yarn add rnlist
bun add rnlist
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2018-02-09 |
| First published | 2018-01-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 130.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ektx |
| Maintainers | ektx |
| Keywords | react, native, list |

## Links

- npm: https://www.npmjs.com/package/rnlist
- Repository: https://github.com/ektx/RNList
- Homepage: https://github.com/ektx/RNList#readme
- Issues: https://github.com/ektx/RNList/issues
- npm.io page: https://npm.io/package/rnlist

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2018-02-09
- 0.0.10 — 2018-02-07
- 0.0.9 — 2018-02-07
- 0.0.8 — 2018-02-07
- 0.0.7 — 2018-02-02
- 0.0.6 — 2018-02-02
- 0.0.5 — 2018-02-01
- 0.0.4 — 2018-02-01
- 0.0.3 — 2018-02-01
- 0.0.2 — 2018-01-31
- 0.0.1 — 2018-01-31

## README

# RNList

基础列表模板

## 使用

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

---
_Source: https://npm.io/package/rnlist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._