react-native-lazyload v1.1.0
react-native-lazyload
A `lazyload` components suit for React Native.
Install
npm install react-native-lazyload
Components
Component | Description |
---|---|
LazyloadScrollView | A lazyload container component based on ScrollView |
LazyloadListView | A lazyload container component based on ListView |
LazyloadView | Based on View component. This component`s content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
LazyloadImage | Based on Image component. The image content won`t be rendered util it scrolls into sight. It should be inside a LazyloadScrollView or LazyloadListView which has the same name prop as this component`s host prop. |
Usage
LazyloadScrollView
- Using
LazyloadScrollView
instead ofScrollView
, and specify a unique id forname
prop. - Layout the views or images which will be lazyloaded by using
LazyloadView
andLazyloadImage
instead ofView
orImage
. - Specify
host
prop for everyLazyloadView
andLazyloadImage
, thehost
prop should be same as outerLazyloadScrollView
component`s name prop.
import React, {
Component
} from 'react-native';
import {
LazyloadScrollView,
LazyloadView,
LazyloadImage
} from 'react-native-lazyload';
const list = [...list data here]; // many rows
class LazyloadScrollViewExample extends Component{
render() {
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="lazyload-list"
>
{list.map((file, i) => <View
key={i}
style={styles.view}
>
<LazyloadView
host="lazyload-list"
style={styles.file}
>
<View style={styles.id}>
<Text style={styles.idText}>{file.id}</Text>
</View>
<View style={styles.detail}>
<Text style={styles.name}>{file.first_name} {file.last_name}</Text>
<Text><Text style={styles.title}>email: </Text><Text style={styles.email}>{file.email}</Text></Text>
<Text style={styles.ip}><Text style={styles.title}>last visit ip: </Text>{file.ip_address}</Text>
</View>
</LazyloadView>
<View style={styles.avatar}>
<LazyloadImage
host="lazyload-list"
style={styles.avatarImage}
source={file.avatar}
/>
</View>
</View>)}
</LazyloadScrollView>
);
}
}
LazyloadListView
Same as ListView. But it won`t render LazyloadView
and LazyloadImage
inside it, util they are scrolled into sight.
Additional Methods
refresh - Force to trigger an update. Useful after nagivation pop/push where the memory may have been release.
Additional Props
Components that extend LazyloadView can accept a prop (function) to be called when the item's visibility changes.
onVisibilityChange - An optional function to be called with the new visibility, ref, and props
Example:
<LazyloadView onVisibilityChange={ this.handleItemVisibility }>
...
</LazyloadView>
...
handleItemVisibility(visibility, ref, props) {
console.log('visibility, ref, props', visibility, ref, props);
}
Run Example
Clone this repository from Github and cd to 'Example' directory then run npm install
.
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago