callstack / callstack/react-native-pager-view

Dynamic / lazy approach to load pages

Đang mở
#104 25 bình luận 21 reaction 0 người được giao Xem trên GitHub
enhancement
Ngôn ngữ chính
TypeScript
Star
3.4k
Fork
476
Merge trung bình
10 ngày 21 giờ
Pull request đã merge (30 ngày)
2

Mô tả

# Feature Request

## Why it is needed

Performance way to load a LOT of pages dynamically to create a truly dynamic swiper.

## Possible implementation / Code sample

Right now I can do something like:

```js
const [position, setPosition] = useState(0);

const onPageSelected = e => {
setPosition(e.nativeEvent.position);
};

const min = 0;
const max = position + numberOfPages;

const items = data.slice(min, max).map((item, index) => (
// If they are are not inside the range, we render null to get a better performance

{index < position + numberOfPages && index > position - numberOfPages ? (

) : null}

));

...
>
{items}

```

**Contraints**: List keeps growing while you swipe.

A better way instead of rendering `null` would be to slice from the beginning too:

```js
const min = position - numberOfPages;
const max = position + numberOfPages;
```

However, this approach has a problem. Consider the scenario:

* Pages: `1 2 3 4` and position = 2 (selected element is 3).

We slice from the beginning and we render:

* Pages `2 3 4 5` but still position = 2 (selected element will be 4). <-- The problem is that if we change the children in this way, we need to adapt the position (here the position should be 1 for selected element to be still 3).

---

Another approach would be doing this by default natively: https://github.com/react-native-community/react-native-viewpager/issues/83.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với hai ví dụ về cửa sổ con trong issue và cuộc thảo luận được liên kết react-native-community/react-native-viewpager#83 để hiểu các ràng buộc native. Công việc được xem là hoàn tất khi cung cấp một phương pháp động, có tài liệu, có thể tải lazy nhiều trang trong khi vẫn giữ nguyên trang được chọn khi danh sách phát triển.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react-native
Lĩnh vực
mobile
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
25/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.