https://github.com/react-native-studio/react-native-giftedlist
✌️ ListView or FlatList with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps
https://github.com/react-native-studio/react-native-giftedlist
Last synced: 10 months ago
JSON representation
✌️ ListView or FlatList with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps
- Host: GitHub
- URL: https://github.com/react-native-studio/react-native-giftedlist
- Owner: react-native-studio
- Created: 2018-03-02T07:51:57.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-03T02:29:23.000Z (almost 8 years ago)
- Last Synced: 2025-04-19T03:37:02.767Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-GiftedList [](https://badge.fury.io/js/react-native-giftedlist)
A ListView or FlatList with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps
## 安装
`npm install react-native-giftedlist --save` or `yarn add react-native-giftedlist`
## 使用
### Simple example
```js
var React = require('react-native');
var {
StyleSheet,
Text,
View,
TouchableHighlight,
ListView,
FlatList,
} = React;
var createGiftedList = require('react-native-giftedlist');
const GiftedListView=createGiftedList(ListView);
//也可以使用 createGiftedList(FlatList)
var Example = React.createClass({
/**
* Will be called when refreshing
* Should be replaced by your own logic
* @param {number} page Requested page to fetch
* @param {function} callback Should pass the rows
* @param {object} options Inform if first load
*/
_onFetch(page = 1, callback, options) {
setTimeout(() => {
var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];
if (page === 3) {
callback(rows, {
allLoaded: true, // the end of the list is reached
});
} else {
callback(rows);
}
}, 1000); // simulating network fetching
},
/**
* When a row is touched
* @param {object} rowData Row data
*/
_onPress(rowData) {
console.log(rowData+' pressed');
},
/**
* Render a row
* @param {object} rowData Row data
*/
_renderRowView(rowData) {
return (
this._onPress(rowData)}
>
{rowData}
);
},
render() {
return (
);
}
});
var styles = {
container: {
flex: 1,
backgroundColor: '#FFF',
},
navBar: {
height: 64,
backgroundColor: '#CCC'
},
row: {
padding: 10,
height: 44,
},
};
```