Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Does not work within a ScrollView, bad performance when rendering multiple list components with real time data

Offen
  • Stimmt etwas nicht?
#995 2 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
25/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
react-native
Bereich
mobile, performance

Rechercherichtung

Beginne mit dem reproduzierbaren MyPager-Beispiel im Issue unter Verwendung von React Native 0.79.1 und react-native-pager-view 6.7.1. Untersuche die Fälle von PagerView innerhalb von ScrollView und von Echtzeitaktualisierungen mehrerer Listen; als abgeschlossen gilt die Arbeit, wenn der übergeordnete ScrollView scrollen kann, wenn die Geste über dem Pager beginnt, und die Rendering-Performance verbessert ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Environment

react-native @ 0.79.1
react-native-pager-view @ 6.7.1

Description

Since @MrRefactor requested a new issue to be created (https://github.com/callstack/react-native-pager-view/issues/784), here it is. Compared to version 7.0.0.rc0, the current implementation performs much worse, especially in the case of a pager with multiple list components that have many rows and real-time data updates within. Also, the ScrollView bug persists, we are still not able to scroll a ScrollView when a Pager is rendered inside of it unless we perform the scroll gesture outside of the pager. I don't understand why support for the ScrollView based implementation was dropped as it performed perfectly well and IMO it should replace the current one. Honestly, based on the many threads and reports about this bug, I feel like this issue is being neglected.

Reproducible Demo

import React from 'react';
import { ScrollView, StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';

const MyPager = () => {
  return (
    <ScrollView>
      <PagerView style={styles.pagerView} initialPage={0}>
        <View key="1">
          <Text>First page</Text>
        </View>
        <View key="2">
          <Text>Second page</Text>
        </View>
      </PagerView>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
});

export default MyPager;
Vorherrschende Sprache
TypeScript
Sterne
3.4k
Forks
476
Ø Merge
21 T. 21 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-pager-view

Alle Issues in callstack/react-native-pager-view

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.