Tải ảnh một cách lười biếng trên React Native
ScrollView với tính năng tải ảnh/thành phần một cách lười biếng. Hỗ trợ tất cả các tính năng của ScrollView. Phát hiện ScrollView bằng cách sử dụng các thuộc tính ‘renderRow’ và ‘dataSource’ (ListView cần thêm các thuộc tính này).
Tham số của Thành phần
| tham số | kiểu | mô tả |
|---|---|---|
| autoTriggerIsInScreen | boolean | mặc định: false. Tự động kích hoạt isInScreen cho các phần tử |
| autoTriggerIsInScreenTime | number | mặc định: 1500. đơn vị: ms |
| lazyExtra | number | mặc định: 1000，Cài đặt khu vực tải lười biếng. (không bao gồm chiều cao màn hình) |
Tham số cho các thành phần con của LazyloadView
| thuộc tính của con | kiểu | mô tả |
|---|---|---|
| lazyloadSrc | string, object | mặc định: none. Thành phần hình ảnh nên là <Image lazyloadSrc={'URL'}> hoặc <Image lazyloadSrc={{uri:'URL'}}> |
| lazyRender | boolean | mặc định: false. Sử dụng tính năng đọc lười biếng. Khi các thành phần trong màn hình kích hoạt, sẽ gọi setState({ isRendered: true }) cho thành phần. Chỉ kích hoạt một lần. |
| lazyInScreen | boolean | mặc định: false. Khi các thành phần trong màn hình kích hoạt, sẽ gọi setState({ isInScreen: true })，Chỉ kích hoạt một lần. |
cách sử dụng
npm install react-native-scrollview-lazyload --save
- Tải ảnh một cách lười biếng:
<Image lazyloadSrc={'LOAD_SOURCE'} /> - Tải ảnh một cách lười biếng:
<Image lazyloadSrc={{src:'LOAD_SOURCE'}} /> - Tải lười biếng cho các thành phần:
<View lazyRender={true} /> - Kích hoạt các thành phần trong màn hình:
<View lazyInScreen={true} /> - Khu vực tải lười biếng (mặc định là 1000):
<LazyloadView lazyExtra={1000}></LazyloadView>
[[ĐẢO_NGƯỢC_VÌ_MÃ_0]]
Chi tiết tải về:
Tác giả: IskenHuang
Nguồn: [[ĐẢO_NGƯỢC_VÌ_LIÊN_KẾT_0]]
Cảm ơn bạn!
