什么是rmc-list-view？
rmc-list-view是一个React Native组件，是基于Ant Design Mobile的List组件封装的，具有更好的性能和更完整的功能。rmc-list-view可以实现基本的列表展示和滚动，同时支持分页和下拉刷新等功能。rmc-list-view的安装使用非常简单，通过npm包管理工具安装即可使用。
如何安装rmc-list-view？
使用npm包管理工具进行安装：
npm install rmc-list-view –save
如何使用rmc-list-view？
引入rmc-list-view
import {ListView} from ‘rmc-list-view‘;
创建ListView组件
<ListView dataSource={this.state.dataSource} renderRow={rowData => <ListItem key={rowData.id} data={rowData} />} onEndReached={this.onEndReached} onRefresh={this.onRefresh} size={10} footerText={this.state.isLoading ? '加载中' : ''} />
ListView属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| dataSource | PropTypes.object | 数据源 | |
| renderRow | PropTypes.func | 渲染单元格的函数，传入rowData和sectionID，返回一个可渲染的组件 | |
| onEndReached | PropTypes.func | 列表滚动到底部事件 | |
| onRefresh | PropTypes.func | 下拉刷新事件 | |
| size | PropTypes.number | 页面大小 | |
| footerText | PropTypes.string | 底部状态栏显示内容 |
示例代码
-- -------------------- ---- ------- ------ ------ ----------- ---- -------- ------ ---------- ---- ---------------- ------ -------- ---- ------------- ----- ---- ------- --------- - ------------------ - ------------- ----- ---------- - --- --------------------- -------------- ------ ----- -- ---- --- ----- --- ---------- - - ----------- ------------------------------------- -- - ------------------------------------ - -- ---------------- --- --------------- - --------------- ----------- --------------------------------------------------- --- - - ------------ - -- -- - -- ----- -------- - --------- - -- -- - -- ----- ------- - -------- - ------ - --------- ---------------------------------- ------------------ -- --------- ---------------- -------------- --- -------------------------------- -------------------------- --------- -------------------------------- - ----- - --- -- - - - ------ ------- -----展开代码
使用该组件时，只需要传入data数据，即可展示列表。同时还可以根据需要添加各种参数来实现下拉刷新、上拉分页等功能，具有很强的可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabd7b5cbfe1ea061089b
