callstack / callstack/react-native-pager-view
Dynamic / lazy approach to load pages
- 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