react-native-scroll-lazy

KO | EN

gitlite — search

#javascript #python #ai #typescript #go #machine-learning #rust #deep-learning #docker #nodejs #cli #vue #security #mcp

react-native-scroll-lazy

(★ 13)

No description available.

react-native-scroll-lazy 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## react-native-scroll-lazy

`react-native-scroll-lazy` is a very high-performance large list contain images for React-Native

## Installation

`npm install react-native-scroll-lazy` or `yarn add react-native-scroll-lazy`

#### Components

Component           | Description
------------------- | --------------------
LazyloadScrollView  | A lazyload container component based on `ScrollView`
LazyloadView        | Based on View component. This component\`s content won\`t be rendered util it scrolls into sight. It should be inside a `LazyloadScrollView` which has the same `name` prop as this component\`s host prop.

#### Usage

1. Using `LazyloadScrollView` instead of `ScrollView`, and specify a unique id for `name` prop.
2. Layout the views which will be lazyloaded by using `LazyloadView` instead of `View`.
3. Specify `host` prop for every `LazyloadView`, the `host` prop should be same as outer `LazyloadScrollView` component`s name prop.
4. Using `eventShowView` in `LazyloadView` to listening event change show/hide view.
5. Using `eventChangeHeight` in `LazyloadView` to get init height view.

#### Important

Should not change the height of the `LazyloadView` after it has rendered, this will lead to `lazy loading` false

#### Example

```js
import React, { Component } from 'react-native';

import { LazyloadScrollView, LazyloadView } from 'react-native-scroll-lazy';

const Data = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]

class LazyloadScrollViewExample extends Component{
    render() {
        return (
        <LazyloadScrollView style={{ flex: 1 }} name="lazyload-list">
            <View style={{ flexDirection: 'row' }}>
              <View flex={1}>
                {Data.map((file, i) =>
                  (<LazyloadView
                    eventShowView={(is_show, id) => {/* TODO */}}
                    eventChangeHeight={(height)=>{ /* TODO */}}
                    key={i}
                    host="lazyload-list"
                    style={{ height: 200, backgroundColor: '#99ccff', marginHorizontal: 5, marginTop: 5, borderRadius: 5 }}
                  >
                    {/* children*/}
                  </LazyloadView>))
                }
              </View>
              <View flex={1}>
                {Data.map((file, i) =>
                  (<LazyloadView
                    eventShowView={(is_show, id) => {/* TODO */}}
                    eventChangeHeight={(height)=>{ /* TODO */}}
                    key={i}
                    host="lazyload-list"
                    style={{ height: 200, backgroundColor: '#99ccff', marginHorizontal: 5, marginTop: 5, borderRadius: 5 }}
                  >
                    {/* children*/}
                  </LazyloadView>))
                }
              </View>
            </View>
        </LazyloadScrollView>);
    }
}

```

react-native-scroll-lazy

react-native-scroll-lazy 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-scroll-lazy

react-native-scroll-lazy 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README