callstack / callstack/react-native-pager-view
Dynamic / lazy approach to load pages
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
# 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.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par les deux exemples de fenêtres enfants de l’issue et la discussion liée react-native-community/react-native-viewpager#83 afin de comprendre les contraintes natives. Le travail sera considéré comme terminé lorsqu’une approche dynamique et documentée permettant de charger de nombreuses pages de manière différée tout en conservant la page sélectionnée à mesure que la liste s’agrandit sera fournie.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react-native
- Domaine
- mobile
- Type d'issue
- Fonctionnalité
- Difficulté
- 5/5
- Temps estimé
- Plus d'une semaine
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 25/100