callstack / callstack/react-native-pager-view

Dynamic / lazy approach to load pages

Aperta
#104 25 commenti 21 reazioni 0 assegnatari Vedi su GitHub
enhancement
Lingua principale
TypeScript
Stelle
3.4k
Fork
476
Merge medio
10g 21h
PR unite (30g)
2

Descrizione

# 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con i due esempi di finestre figlie dell’issue e con la discussione collegata react-native-community/react-native-viewpager#83 per comprendere i vincoli nativi. Il lavoro sarà completato quando sarà fornito un approccio dinamico e documentato in grado di caricare molte pagine in modo lazy, mantenendo la pagina selezionata mentre l’elenco cresce.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react-native
Ambito
mobile
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.