A `lazyload` components suit for React Native.
npm install react-native-lazyload
| 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. |
- Using
LazyloadScrollViewinstead ofScrollView, and specify a unique id fornameprop. - Layout the views or images which will be lazyloaded by using
LazyloadViewandLazyloadImageinstead ofVieworImage. - Specify
hostprop for everyLazyloadViewandLazyloadImage, thehostprop should be same as outerLazyloadScrollViewcomponent`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>
);
}
}Same as ListView. But it won`t render LazyloadView and LazyloadImage inside it, util they are scrolled into sight.
refresh - Force to trigger an update. Useful after nagivation pop/push where the memory may have been release.
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);
}
Clone this repository from Github and cd to 'Example' directory then run npm install.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent