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) |
In LazyloadView components params
参数名称 | 型态 | 说明 |
---|---|---|
lazyloadSrc | string, object | default: none. Image component should be <Image lazyloadSrc={'URL'}> or <Image lazyloadSrc={{uri:'URL'}}> |
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:
<Image lazyloadSrc={'LOAD_SOURCE'} />
- Lazy load image:
<Image lazyloadSrc={{src:'LOAD_SOURCE'}} />
- Lazy load components:
<View lazyRender={true} />
- Trigger components in screen:
<View lazyInScreen={true} />
- Lazy load area(default is 1000):
<LazyloadView lazyExtra={1000}></LazyloadView>
var React = ;var AppRegistry Text View Image ListView = React; var LazyComponent = React; var InScreenComponents = React; var LazyloadView = ; ... { // ListView var body = rowStyle = flex:1 height: 60 alignItems: 'center' justifyContent: 'center' flexDirection: 'row' { return <View style=rowStyle ref=dref> <Image lazyloadSrc=dimg style= width: 60 height: 60 position: 'absolute' left: 0 /> <Text>Row: dindex</Text> </View> ; }; forvar i = 0 ; i < 100; i++ body; return <LazyloadView contentInset=top: 0 bottom: 20 dataSource=thispropsdataSource renderRow= { // console.log('renderRow = ', rowData, rowID); return ; } _onScroll= { console; } ></LazyloadView> ; // ScrollView var body = rowStyle = flex:1 height: 60 alignItems: 'center' justifyContent: 'center' flexDirection: 'row' imgStyle = width: 60 height: 60 position: 'absolute' left: 0 ; forvar i = 0 ; i < 100; i++ var imageUrl = 'https://placeholdit.imgix.net/~text?txtsize=8&txt=60%C3%9760&w=60&h=60'; body; return <LazyloadView _onScroll= { }> _onScrollEndDrag= { } _renderHeader= { // when add this props please return something return <Text>HEADER</Text>; } body </LazyloadView> ;}