Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IskenHuang/react-native-scrollview-lazyload
React Native scrollview/listview component with image lazyload feature
https://github.com/IskenHuang/react-native-scrollview-lazyload
Last synced: 6 days ago
JSON representation
React Native scrollview/listview component with image lazyload feature
- Host: GitHub
- URL: https://github.com/IskenHuang/react-native-scrollview-lazyload
- Owner: IskenHuang
- Created: 2015-08-01T10:50:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-04-26T16:22:50.000Z (over 8 years ago)
- Last Synced: 2024-04-26T02:34:38.127Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 77
- Watchers: 4
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-scrollview-lazyload ★71 - react-native scrollview with image lazy load (Components / UI)
- awesome-react-native - react-native-scrollview-lazyload ★71 - react-native scrollview with image lazy load (Components / UI)
- awesome-reactnative-ui - react-native-scrollview-lazyload
- awesome-react-native - react-native-scrollview-lazyload ★71 - react-native scrollview with image lazy load (Components / UI)
- awesome-reactnative-ui - react-native-scrollview-lazyload
- awesome-react-native - react-native-scrollview-lazyload ★71 - react-native scrollview with image lazy load (Components / UI)
- awesome-react-native-ui - react-native-scrollview-lazyload ★54 - react-native scrollview with image lazy load (Components / UI)
README
# React Native scrollview lazyload
ScrollView with image/components lazyload feature. Support all ScrollView feature. Detect ScrollView by 'renderRow' and 'dataSource' props(ListView should be add this props).
# Component Params
| param | type | description |
| --- | --- | --- |
| autoTriggerIsInScreen | boolean | default: false. Is auto trigger isInScreen to elements |
| autoTriggerIsInScreenTime | number | default: 1500. unit: ms |
| lazyExtra | number | default: 1000，Setup lasy load area. (doesn't include screen height) |
# LazyloadView children components params
| children props | type | description |
| --- | --- | --- |
| lazyloadSrc | string, object | default: none. Image component should be `` or ``|
| lazyRender | boolean | default: false. Using lazy reader feature. When components in screen will trigger `setState({ isRendered: true })` for component. Only trigger once. |
| lazyInScreen | boolean | default: false. When components in screen will trigger `setState({ isInScreen: true })`，Only trigger once. |
# how to use
`npm install react-native-scrollview-lazyload --save`
* Lazy load image: ``
* Lazy load image: ``
* Lazy load components: ``
* Trigger components in screen: ``
* Lazy load area(default is 1000): ``
```javascript
var React = require('react-native');
var {
AppRegistry,
Text,
View,
Image,
ListView,
} = React;
var LazyComponent = React.createClass({
getDefaultProps: function() {
return {
lazyRender: false
};
},
getInitialState: function() {
return {
isRendered: !this.props.lazyRender,
};
},
shouldComponentUpdate: function() {
// forceRender is dont used lazy render
if(this.state.isRendered && !this.props.forceRender) {
return false;
}
return true;
},
renderLoading: function() {
return (
{'Loading...'}
);
},
render: function(){
var content = ({this.props.children}) || null;
if(!this.state.isRendered && this.props.lazyRender) {
content = this.renderLoading();
}
return (
{content}
);
},
});
var InScreenComponents = React.createClass({
shouldComponentUpdate: function() {
// forceRender is dont used lazy render
if(this.state.isInScreen) {
this.setState({ title: 'Is in screen first time'})
}
return false;
},
render: function(){
return (
{this.state.title || 'Never in screen'}
);
},
});
var LazyloadView = require('@ali/react-native-lazyloadview');
...
render: function() {
// ListView
var body = [],
rowStyle = {
flex:1,
height: 60,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
renderElement = function(d){
return (
Row: {d.index}
);
};
for(var i = 0 ; i < 100; i++) {
body.push({
ref: 'row' + i,
img: 'https://placeholdit.imgix.net/~text?txtsize=8&txt=60%C3%9760&w=60&h=60',
index: i,
});
}
return (
{
// console.log('renderRow = ', rowData, rowID);
return renderElement(rowData);
}}
_onScroll={(e) => {
console.log('_onScroll = ', e.nativeEvent);
}}
>
);
// ScrollView
var body = [],
rowStyle = {
flex:1,
height: 60,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
},
imgStyle = {
width: 60,
height: 60,
position: 'absolute',
left: 0,
};
for(var i = 0 ; i < 100; i++) {
var imageUrl = 'https://placeholdit.imgix.net/~text?txtsize=8&txt=60%C3%9760&w=60&h=60';
body.push(
Row: {i}
);
}
return (
{
}}>
_onScrollEndDrag={(e) => {
}}
_renderHeader={(e) => {
// when add this props please return something
return (HEADER);
}}
{body}
);
},
```