+1
Stehe auf genau das gleiche Problem. Hat mit 0,5 gearbeitet, ist aber mit 0,6 kaputt gegangen.

Dies sollte in 0,7 behoben werden

Ich hatte genau das gleiche Problem.

CloneWithRows funktioniert einwandfrei. aber cloneWithRowsandSections nicht.

Sehen Sie, dass cloneWithRowsandSections nicht mit 0.7 funktioniert?

Vielleicht möchten Sie auch versuchen, initialListSize auf eine größere Zahl zu setzen - dies kann als Problemumgehung hilfreich sein, wenn die Dinge in 0.7 nicht für Sie behoben sind.

Größere initialListSize hilft nicht und 0.7 habe ich noch nicht probiert, da Herstellerabhängigkeit. Da es möglich sein wird, lasse ich dich über 0.7 wissen, wenn jemand nicht schneller ist :)

Hatte das gleiche Problem mit cloneWithRows in Version 0.6, funktionierte in 0.5.

In 0.7 noch nicht probiert. Werde es mal versuchen. Ich weiß, dass ich zuvor auch versucht hatte, die initialListSize auf eine höhere Zahl zu setzen, und es hat nicht geholfen.

arbeitete in 0.7

Funktioniert auch nicht in 0.7.1

Habe das gleiche Problem mit cloneWithRows in Version 0.7.1

Bei mir funktioniert es gut in 0.7.1.

Funktioniert nicht in 0.8.0.

Verwende immer noch cloneWithRows anstelle von cloneWithRowsAndSections

cloneWithRows funktioniert für dich, yamill? Nichts für mich in 0.8.0.

@coderdave eigentlich cloneWithRows funktioniert bei mir auch nicht. mein Fehler.

@sahrens @ide @michalraska meine scrollY Requisite wurde nicht aktualisiert. Ich habe im Grunde versucht, den Scroll-Offset wie folgt an meine Komponente zu übergeben:

    renderRow: function (rowData, sectionID, rowID) {
          return (
            <Row
            key={rowData.id} data={rowData} scrollY={this.state.contentOffset}
             />
          )
    });

Aber das Reparieren dieser Zeile ermöglichte es mir, die scrollY Requisite für meine Komponente erfolgreich zu erhalten. Ich frage mich, ob diese Änderung alle anderen Probleme behebt?

https://github.com/facebook/react-native/blob/757d6d204ae2d743634af64e3f78a4aad9d53f70/Libraries/CustomComponents/ListView/ListView.js#L342 -L343

Ich habe es geändert von:

var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount && dataSource.rowShouldUpdate(sectionIdx, rowIdx);

zu

var shouldUpdateRow = true;

Ich habe dies auch bei 0.11.0-rc bemerkt.

Hier sind zwei Beispiele, die das Problem reproduzieren können.

Zeilen: https://rnplay.org/apps/d3DM6A
Zeilen + Abschnitte: https://rnplay.org/apps/xnyaYw

Die vorübergehende Lösung, die ich mir ausgedacht habe, bestand darin, das ListView 1pt beim Einhängen zu scrollen.

let listViewScrollView = this.refs.listView.getScrollResponder();
listViewScrollView.scrollTo(1);

Sie können diesen Abschnitt innerhalb des Beispiels auf rnplay.org zum Testen auskommentieren.

Dumme Frage. Könnte das etwas mit der Verwendung von NavigatorIOS zu tun haben? Ich hatte einige Probleme beim Rendern, Auffüllen usw., wenn eine Listenansicht als Kind von NavigatorIOS gerendert wurde.

@jaygarcia Ich glaube nicht, da die Beispiele NavigatorIOS nicht verwenden. Außerdem verwende ich in meinem eigenen Projekt Navigator anstelle von NavigatorIOS.

+1 für mich, dieses Verhalten tritt derzeit bei der Verwendung von Navigator auf. Ich habe 0.11 und verwende cloneWithRows.

Als Workaround musste ich die Lösung von @christopherdro verwenden, aber ich müsste sie ausreichend scrollen, um meine Elemente gerendert zu bekommen (sie sind groß).

Interessanterweise hängt die Problemumgehung mit der Problemumgehung für diesen Fehler zusammen: https://github.com/facebook/react-native/issues/1878 Mein endgültiger Code lautet also:

    listViewScrollView.scrollWithoutAnimationTo(80);
    listViewScrollView.scrollWithoutAnimationTo(-80);

ok, mit dem oben genannten Code habe ich einige bizarre Fehler in verschachtelten ScrollViews erhalten: Nach dem Mounten wurde ein onScroll-Ereignis ausgelöst, das meinen anfänglichen Scroll-Offset in diesen Ansichten neu positionierte.

Immer noch ein Fehler in 0.12.0. Hier ist die Ansichtshierarchie:

Dieselben Probleme wie bei ListView aus der Navigator Hierarchie verschiebe.

Ich habe das gleiche Problem mit 0.13.0-rc

Ich habe dieses Problem in 0.13.1 nur mit diesem:

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {dataSource: ds.cloneWithRows(Array.apply(null, {length: 100}).map(Number.call, Number))};
    }
    render() {
        return (
    <ListView
        style={{paddingTop: 20, flex: 1}}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
    />
    )

Bei mir trat dieses Problem gerade beim Upgrade von 0.14.2 auf 0.16.0-rc . Die Lösung, die für mich funktionierte, bestand darin, die Requisite pageSize im ListView auf 3 zu setzen. 2 funktionierte nicht für mich, aber 3 funktionierte einfach großartig.

_(ツ)_/¯

gleiches Problem hier mit 0.15.0 , alle Tricks ausprobiert, kein Glück. iOS 9.1 iPhone 6

@nicklockwood - kannst du hier helfen? Anscheinend gibt es noch einige Bugs.

0.14, gleiches Problem

Verlinken eines ähnlichen LisView-Problems: https://github.com/facebook/react-native/issues/4728

Verlinkung eines anderen ähnlichen Problems: https://github.com/facebook/react-native/issues/4179

Ich sehe dies in 0.16.0. Hat jemand dies auf dem Radar auf Product Pains platziert? Dieser wird ziemlich schmerzhaft. :/

Ich habe dies auf Product Pains gepostet. Wenn es immer noch Auswirkungen hat, können Sie es dort abstimmen.

0.16, gleiches Problem

Das Problem besteht weiterhin in 0.17, wenn cloneWithRows für die dataSource verwendet wird. Die Liste gibt nur Elemente wieder, wenn sie gescrollt wird.

Ich habe das gleiche Problem bei 0.17 gesehen, aber das Deaktivieren von removeClippedSubviews scheint es behoben zu haben.

+1
Ich habe das gleiche Problem bei 0.17 gesehen, aber das Deaktivieren von removeClippedSubviews scheint es behoben zu haben.

Bei mir passiert es immer noch in 0.17 mit oder ohne removeClippedSubviews . Was mir aufgefallen ist, war, dass mein Problem möglicherweise mit einem manuell eingestellten contentOffset und initialListSize . Wenn der Versatz die Höhe der Elemente überschreitet, die für initialListSize gerendert werden, werden die erforderlichen Elemente erst gerendert, wenn der Benutzer scrollt.

Es scheint auch ein Problem mit Listen zu geben, für die flexDirection: 'row' festgelegt ist. Wenn ich diese Eigenschaft entferne, werden alle Elemente gerendert. Wenn es gesetzt ist, rendert die Liste zunächst nur zwei Elemente.

Für das Problem removeClippedSubviews bei der Verwendung von Navigator.
Vielleicht möchten Sie https://github.com/machard/react-native-advanced-navigation überprüfen, wo das Problem nicht auftritt (wahrscheinlich weil das Rendern verzögert wird, nachdem die Ansicht wirklich auf dem Bildschirm ist).

Es gibt auch ein Problem mit flexDirection: 'row' und flexWrap: 'wrap' in der Eigenschaft contentContainerStyle . Die Problemumgehung, die für mich funktioniert, ist die Einstellung von pageSize .

reagieren-native Version: 0.19.0

danke @jittuu, das die pageSize-Requisite eingestellt hat, hat es auch für mich getan!

Seitengröße auf was einstellen?

@gre es hängt von deinem Layout ab. Wenn Ihre Ansichten in Zeilen angeordnet sind, sollte pageSize ein Vielfaches der Elemente pro Zeile sein. Sie können mit dem genauen Wert experimentieren, um zu sehen, wie er sich auf die Leistung auswirkt.

Außerdem sollten Sie initialListSize groß genug einstellen, um den gesamten Bildschirm auszufüllen.

Vielleicht finden Sie die Erklärung in diesem Commit nützlich: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu Das hat bei mir funktioniert; Ich hatte den Fehler auch bei der Verwendung von flexWrap .

danke @jittuu setze die pageSize mit dem Wert 2 hat mir das Problem auch gelöst!!

immer noch das Problem beim Scrollen in der Listenansicht, beim Navigieren in der App und beim Zurückgehen.
pageSize hat nicht geholfen (ich habe verschiedene Werte von 1 bis 60 ausprobiert).

@gre stellen Sie initialListSize groß genug ein? Gibt es ein Repo, das wir anzeigen können?

@jaygarcia @nicklockwood Ich habe eine Demo, um diesen Fehler zu reproduzieren, Repo-URL: ListNotRender

Schritt:

1. öffne die App.
2. Klicken Sie auf das Tableistenelement "#1".
3. Listenelement wird erst gerendert, wenn ein Bildlauf erfolgt.

Ich bin sicher, dass dieser Fehler relativ zum removeClippedSubviews-Prop von ListView ist, und der Fehler tritt nur auf, wenn er auf true gesetzt ist.

Dies geschieht bei uns immer noch auf RN 0.26.0. Gleiche Situation hier:

• removeClippedSubviews={true}
• ListView wird außerhalb des Bildschirms gerendert
• Wenn Sie zu diesem Bildschirm gehen, wird die Listenansicht verschoben, bis der Benutzer damit interagiert

cc @javache

Ich glaube, dies wird von https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e behoben

@javache Ich habe diese Zeile manuell lokal hinzugefügt und das Problem wurde nicht

Ich habe auch dieses hier hinzugefügt https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 aber auch kein Erfolg. ;)

der einzelne https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e zusätzlich zu RN 0.28 verursacht auch bei mir den Fehler.

Wenn ich ein bisschen recherchiere, frage ich mich, ob

Denn tatsächlich ist der Fehler für mich leicht reproduzierbar, wenn ich in der Ansicht scrolle, eine Navigation mache, während sie noch mit 'Schwerkraft' scrollt, etwas warte und zurück klicke. Der Vollbildschirm ist weiß, bis ich wieder scrolle.
Aber das ist im Grunde das einzige Szenario, wenn mir dieser Fehler passiert. Ist dies ~ für alle das gleiche Repro-Szenario oder ist der Fehler breiter als dieser?

Dieses Szenario ist nicht so weit von @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032 entfernt.

Es ist schwer, den Grund für diesen Fehler herauszufinden, aber hier sind meine 2 Cent:

Es hört sich so an, dass die Zeilen im Hintergrund _weiß_ gerendert werden. Wenn die Scrollansicht wieder sichtbar gemacht wird _(zB zurück)_, sind sie immer noch weiß und werden nicht aktualisiert _(da sie keinen Grund haben, aktualisiert zu werden, werden sie zwischengespeichert)_ bis ein neuer Scrollvorgang stattfindet.

Würde es den Fehler beheben, wenn das ScrollView seine Kinder ( updateClippedSubviews ?) nur rendern würde, wenn es noch sichtbar ist? (Wenn die Zeilen nicht im Hintergrund gerendert werden, werden sie nie wieder weiß angezeigt)

@javache 1fcd73f kann den Fall ListView mit einer oder zwei Zeilen beheben, die nicht den vollen Bildschirm gefüllt haben. In diesem Fall kann selbst scroll ListView die Listenzeile nicht erneut anzeigen.

Ich finde eine einfache Möglichkeit, den Fehler zu reproduzieren:

1. Zeigen Sie eine ListView mit removeClippedSubViews = true an;
2. Berühren Sie eine Zeile, um zur nächsten Seite zu gelangen;
3. Bildschirmausrichtung um 90 drehen;
4. Bildschirm zurück drehen;
5. Zurück zum ListView-Bildschirm;

ListView ist leer, mit Zeilen mehr als ein Bildschirm, scrollen Sie die ListView wird erneut angezeigt, mit Zeilen weniger als ein Bildschirm, selbst scrollen ListView kann nichts erneut anzeigen. mit 1fcd73f scrollen kann ListView erneut anzeigen :)

1. Beobachte dieses Problem immer noch ab 0.26.3
2. Bei meinem Nicht-RN-Projekt habe ich das Problem in nativem Android gesehen.

Die von uns gewählte Lösung bestand darin, eine scrollTo 1px-Verschiebung vor und zurück aufRefresh durchzuführen. Es ist ein Workaround, aber es hat in beiden Fällen funktioniert.

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); });

@JBerendes ja, dieser Hack funktioniert.

Hier ist eine ausgefeiltere Problemumgehung, die das Scrollen des Benutzers nicht unterbricht:

class ...YourListAbstraction {

  _scrollY = 0;
  _lastTimeScrolled = 0;

  scrollHackToWorkaroundWhiteBug (amount) { // call at appropriated time, with -1 or 1. if possible alternate so you don't change the actual scroll over calls xD
    const { list } = this.refs;
    if (!list) return;
    if (Date.now() - this._lastTimeScrolled < 500) return; // don't mess with user scroll
    list.getScrollResponder().scrollTo({
      y: this._scrollY + amount,
    });
  }

  onScroll = ({ nativeEvent }) => { // give onScroll={this.onScroll} to ListView
    this._scrollY = nativeEvent.contentOffset.y;
    this._lastTimeScrolled = Date.now();
  };

}

um Ihre ListView-Abstraktion einzufügen. Dann müssen Sie scrollHackToWorkaroundWhiteBug zu gegebener Zeit anrufen. Bei mir ist es jedes Mal, wenn ich den Bildschirm wechsel (vor und nach dem Übergang).

Ich denke, dies hängt mit den scrollRenderAheadDistance des ListViews zusammen (weil es die nicht gerenderten Zeilen nach dem Berühren rendert) und ich habe es geschafft, es zu beheben, indem ich scrollRenderAheadDistance auf einen Wert größer als 1800 gesetzt habe. Es gibt definitiv eine Korrelation zwischen scrollRenderAheadDistance und der Anzahl der gerenderten Zeilen, aber sie ist inkonsistent. Ich habe festgestellt, dass es normalerweise wie folgt gerendert wird (obwohl manchmal alle Zeilen gerendert werden):

| scrollRenderAheadDistance | Anzahl der gerenderten Zeilen |
| --- | --- |
| 1000 | 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7+ |

Ich rendere eine ListView mit Zeilen von 80pt Höhe. Ich habe eine Formel abgeleitet, die Ihnen helfen soll, die genau richtigen scrollRenderAheadDistance für Ihre ListView festzulegen:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

Allerdings verstehe ich die Bedeutung von 680 (oder 340 * 2 ) nicht.

BEARBEITEN: Diese Lösung funktioniert im Debug-, aber nicht im Release-Schema (für iOS) ...

Ok, das Setzen von removeClippedSubviews auf false löst das Problem für mich.

Ich bin darauf erst beim Upgrade von 0,26 auf 0,29 gestoßen, also wurde etwas in 0,27, 0,28 oder 0,29 eingeführt (ich habe noch nicht gegen 0,27 oder 0,28 getestet, aber ich kann es, wenn das hilft).

@gnestor Es ist in 0,29 defekt, überprüfen Sie #8607 und https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7

@gnestor @nihgwu Ich bin mir ziemlich sicher, dass der Fehler keine neue Regression ist. Dieses Problem wurde vor einem Jahr erstellt, und ich habe es persönlich seit RN 0.13 erlebt und immer einen Workaround verwendet, um mit ListView zu "überleben". Wenn Sie removeClippedSubviews die große Liste verzögert.
Vielleicht gab es Versuche, es zu beheben oder zumindest Fälle zu reduzieren, in denen der Fehler auftritt, aber dies geschieht immer noch ungefähr so, wie es in dieser ersten Problemmeldung gemeldet wurde.

@gre aber ich denke immer noch , # 8607 wurde in in 0.29 eingeführt, es ist wirklich lästig leere Ansicht gehen, ich zurückkehren nur die Änderung der https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 und alles funktioniert gut als vorher ohne auszuschalten removeClippedSubviews

Setze initialListSize auf einen richtigen Wert und setze removeClippedSubviews auf false. Mein Problem lösen

Habe dieses Problem nach dem Upgrade von 0.28 auf 0.29.
removeClippedSubviews={false} das Problem gelöst.
Außerdem aktualisiere ich in meinem Fall ListView Höhe auf componentDidUpdate() .
Es hilft auch, den Höhenaktualisierungscode in componentDidUpdate() mit setTimeout mit benutzerdefiniertem Timeout einzuschließen.

Ich habe dies auch erlebt, aber es war in einer ListView, die mit lokalen Daten gefüllt war. Ich habe dies auch nur auf iOS und nach dem Upgrade auf 0.29 gesehen. Das fragliche ListView verwendet this.state.dataSource.cloneWithRowsAndSections und componentDidMount ist, wenn ich es lade.

Und so ging removeClippedSubviews={false} darauf ein.

Das Setzen von removeClippedSubviews für meine ListView Komponente hat auch bei mir funktioniert. Ich hatte dieses Problem nur mit dem Release Schema auf 0.29 wenn die Standardkomponente Navigator .

Ich habe das gleiche Problem, ich habe flexDirection: 'row' und flexWrap: 'wrap' eingestellt, ich bin auf RN 0.29.2. Bei anderen Listenansichten (bei denen ich flexDirection nicht gesetzt habe: 'row') habe ich dieses Problem nicht.

Eine schnelle Lösung, wie andere Poster gesagt haben, besteht darin, die richtige initialListSize und pageSize einzustellen, aber ich glaube, dass dies die App weniger reaktionsfähig macht, zum Beispiel wenn Sie einige Filter haben, die nur die Teile einer Liste von Elementen anzeigen, die Sie in der Listenansicht haben , ist das Tippen zwischen Filtern langsam, da die Listenansicht versucht, den gesamten sichtbaren Bereich neu zu rendern.

Bei anderen Listenansichten habe ich dies gelöst, indem ich initialListSize=0 pageSize=1 gesetzt habe. Aber ich kann die Rasterlistenansicht nicht verwenden (flexDirection: 'row' und flexWrap: 'wrap').

Ich treffe das auf RN v0.31.0-rc.0.

Das Hinzufügen von removeClippedSubviews={false} scheint das Problem behoben zu haben.

"removeClippedSubviews={false}" scheint keine gute Lösung zu sein, es wird alle Zeilen rendern und hat ein Problem mit der Speicherverwaltung. Hat jemand eine bessere Lösung außer "listView. scrollTo" und "removeClippedSubviews"?

Dieses Problem ist bei iOS 10 Beta mit RN 0.31 viel schlimmer :-(

removeClippedSubviews hat mir auf Android nicht geholfen, musste stattdessen von ListView zu ScrollView wechseln.

Ein wirklich großer Bug. Ich habe es auch kennengelernt.

Stellen Sie sicher, dass alle es bei Product Pains positiv bewerten. Es ist schon ziemlich weit oben, aber noch nicht ganz hoch genug, um in jemandes Posteingang zu landen :-( Hier ist der Link

An dieser Stelle würde ich sagen, dass dies wahrscheinlich das gleiche Problem wie #8607 ist. Sehen Sie sich meinen Plan an, wie Sie ihn angehen können.

Existiert weiterhin in 0.33.0

Existiert immer noch in 0,32

Ich bin gestern auf diesen Fehler gestoßen und die Einstellung von removeClippedSubviews = {false} funktioniert.

+1 auf 0,33

Ja, ich, gleiches Problem! +1
0,33,
Bearbeiten:
removeClippedSubviews = {false}, das Problem wurde auch bei mir behoben.

+1

Könnten Sie diesen Patch https://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (von #8607) ausprobieren und mir mitteilen, ob er bei diesem Problem hilft?

@majak Vielen Dank für das Teilen dieses Patches. Wir wenden es einfach an, jetzt ist dieses Problem weg (RN 0,34).

@majak das scheint es auch für mich zu beheben, gute Arbeit!

Dies geschieht auf RN34, wenn removeClippedSubviews={true}

Hatte dieses Problem bei React Native 0.34.
Das Problem trat nur auf wenn ich folgendes hatte:

    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',

im Listenansichtsstil.

initialListSize={100}
hat es für mich behoben

@majak planen Sie, mit diesem Patch eine PR zu erstellen?

@janmonschke yup! Folgen Sie der verlinkten Ausgabe für Updates.

Hatte dieses Problem bei React Native 0.36

Ich kann bestätigen, dass dies bei 0,36 passiert

Es funktioniert perfekt im Emulator, nur im Debug-Modus, aber nie auf einem Gerät. Die Liste funktioniert nie auf einem Gerät, habe alles versucht, was von oben empfohlen wurde, habe sogar das ListView durch ScrollView . Alles, was ich auf meinem Android-Gerät sehe, ist der Navigator. (Habe sogar versucht, die Liste außerhalb des Navigators zu platzieren)
0.37

Ich kann das Problem immer noch unter 0.36 finden, aber danke für die Umgehung!

Ich sehe es immer noch bei 0,36.1

Ich sehe es immer noch bei 0,36.1

existieren in 0,31
initialListSize={1} löse es für mich

Hatte dieses Problem bei React Native 0.38

renderScrollComponent={(props) => <ScrollView style={flex: 1} /> }

das behebt das Problem in Version 0.38, ich weiß nicht, ob es auch in früheren Versionen funktioniert.
dieses Archiv das Problem in Version 0.38, ich weiß nicht, ob es an frühen Versionen funktioniert

Dieses Problem besteht bei 0.36.
Mit removeClippedSubviews = {false} und initialListSize={8} konnte es nicht funktionieren

mehr als 1 Jahr vergangen, dieses Thema ist noch offen??

existiert noch auf 0.39. set removeClippedSubviews = {false} funktioniert.

"removeClippedSubviews={false}" scheint keine gute Lösung zu sein, ich habe eine neue Lösung und sie funktioniert für mich. iOS-Plattform. RCTView.m-Datei

soll ich eine PR erstellen?

Hat jemand auf RN0.40 getestet, tritt dieses Problem nach dem Upgrade auf RN0.40 nicht mehr auf

Dieses Problem besteht.
1, Zeigen Sie eine ListView mit removeClippedSubViews = true an;
2, Berühren Sie eine Zeile und geben Sie die nächste Seite ein;
3, Bildschirmausrichtung um 90 drehen;
4, Zurück zum ListView-Bildschirm;

ListView ist leer, mit Zeilen mehr als ein Bildschirm, scrollen Sie die ListView wird erneut angezeigt

@endpress Ich habe deine Schritte befolgt, kann es immer noch nicht reproduzieren, indem ich RN0.41RC0 verwende

Habe dieses Problem in 0.38.

Meine Problemumgehung besteht darin, das paddingTop von ListView zwischen 0 und 1 zu ändern, sodass die ListView jedes Mal aktualisiert wird.

Sie können versuchen, die Hintergrundfarbe, den Rahmen usw. zu ändern. Bitte lassen Sie mich wissen, ob andere Eigenschaften funktionieren.

@nihgwu existiert noch auf 0.40.0

Das ist das Problem

@endpress die Änderung (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) funktioniert für meinen Fall und kann auch facebook/react-native#8607 helfen.
Ich weiß, dass der Patch noch lange nicht perfekt ist, aber ich empfehle Ihnen trotzdem, eine PR zu erstellen.

für mich behebt es sogar die Einstellung initialListSize={0} rn 0.40.0

@majak Gibt es etwas Gutes zu diesem fatalen Problem?

Was ist mit https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ?

FlatList ist noch experimentell, daher gibt es keine Garantie dafür, dass es weniger Fehler hat oder sich auf abwärtsinkompatible Weise ändert, aber Sie können es auf eigenes Risiko ausprobieren.

@sahrens @gre Ist es möglich, eine abstrakte Ebene auf FlatList aufzubauen, die dieselbe API wie das alte ListView bietet, damit unser alter Anwendungscode gleich bleiben kann.

@sahrens FlatList ist mit UITableView implementiert?

Sobald FlatList stabilisiert und nicht mehr experimentell ist, erstellen wir möglicherweise einen Adapter mit einer identischen API wie ListView oder tauschen die Implementierung von ListView unter der Haube aus.

Es verwendet keine UITableView. Es verwendet eigentlich überhaupt keinen neuen nativen Code, es ist alles nur JS mit unseren vorhandenen nativen/Framework-Primitiven - Sie können sich die Implementierung hier ansehen: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens danke, es ist ziemlich cool und nützlich.

Wenn @savanthongvanh die Anfangsgröße auf 0 setzt, werden alle Elemente in der ListView beim ersten Laden gerendert. Seien Sie dabei vorsichtig, wenn Sie viele Gegenstände haben.

Auch damit umgehen rn 0.41.2. Hat jemand eine einfache Implementierung von FlatLIst, die ich kopieren kann, hoffe wirklich auf eine baldige Lösung.
Vielen Dank,
ron

FlatList (und VirtualizedList) sind im Master, wenn Sie mit ihnen spielen möchten.

Hier ist eine einfache Möglichkeit, jetzt mit FlatList zu beginnen, für alle, die sich damit beschäftigen: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

Setzen Sie initialListSize auf einen richtigen Wert und setzen Sie removeClippedSubviews auf false, um mein Problem zu lösen

Danke @hoperce , mit removeClippedSubviews funktioniert bei mir, die initialListSize verursachen abgehacktes Scrollen

Ich habe RN .42 und sehe hier keine experimentellen Libs für die FlatList, also stecke ich fest, bis ich mit diesem Problem (nicht für eine kurze Zeit) aktualisieren kann.

Sie können den FlatList-Code jederzeit in Ihre App kopieren, auch wenn Sie nicht die neueste Version von RN verwenden.

Ich kann den Fehler "Vollansicht wird beim Zurückgehen weiß" mit FlatList immer noch reproduzieren. Ich frage mich, ob es nicht mehr mit ScrollView zu tun hat.

Das Problem mit dem kurzzeitigen Weißwerden ist völlig anders und einzigartig bei FlatList. Wir arbeiten daran, es zu mildern, aber es ist eine knifflige Folge des asynchronen Fenster-Rendering. Der Fehler, auf den sich dieses Problem bezieht, ist, dass beim ersten Rendern kein Inhalt sichtbar ist, bis der Benutzer scrollt, was hoffentlich mit FlatList behoben wird.

Ich habe dieses Problem auch mit ListView (und FlatList) festgestellt.

Ich habe gerade entdeckt, dass ich die Liste richtig rendern kann, indem ich meine Datenquelle im Konstruktor der Ansicht auf [] zurücksetze und sie dann in einem setTimeout() auf die Liste der Elemente zurücksetze.

Zu Ihrer Information Meine Listenansicht ist in einem ReactNavigation StackNavigator in einem TabNavigator eingebettet.

Außerdem funktioniert der Hack zum programmgesteuerten Auslösen eines 1px-Scrolls sowohl für ListView als auch für FlatList. aber Sie müssen es im richtigen Lebenszyklus aufrufen (normalerweise, wenn Sie zum Bildschirm zurückkehren).

@gre : hast du eine Repro-App für das Problem mit FlatList? Das möchte ich so schnell wie möglich beheben!

@gre , hast du einen Beispielcode dafür? Und meinst du in componentWillMount für diese Komponente, die ein ListView umfasst?

@ericvicenti - es sieht so aus, als ob es einige andere

@sahrens tut

@natdm ein bisschen oben in einem Kommentar: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 – das ist die Grundidee, davon bin ich mehr oder weniger abgewichen mit einem System, das wird Wechseln Sie zwischen -1px und 1px, damit sich im Laufe der Zeit kein Bild ansammelt XD riesiger Hack

Ich habe dieses Problem mit SectionList - leer beim ersten Rendern, bis ich scrolle. @sahrens ist eine Lösung in Sicht?

@smkhalsa hast du eine klare repro? Macht die Einstellung removeClippedSubviews={false}

@sahrens Es sieht so aus, als ob die Einstellung removeClippedSubviews={false} dies für mich behebt. Ohne dies erhalte ich jedes Mal einen leeren Bildschirm, wenn ich zu dieser bestimmten Ansicht navigiere.

Ich werde versuchen, das Problem in einem neuen Repo zu isolieren und es zu posten, wenn ich kann.

dasselbe für mich (removeClippedSubviews ist definitiv ein Auslöser für den Fehler). Wir hatten gerade ein einfaches Repro in unserer App, das Listen in der reaktiven-nativen-tab-ansicht enthält. Ich weiß jedoch nicht, ob ein einfacheres Beispiel es reproduzieren wird.

siehe die 2 letzten Absätze meiner Antwort hier https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

Ich denke, es könnte etwas sein (nur eine Hypothese):

(1) Liste wird in einem Hintergrund-Tab gerendert, da sie sich außerhalb des Begrenzungsrahmens befinden. removeClippedSubviews geht davon aus, dass sie nicht hier sind und nichts rendert (weiß)
(2) Wenn die Registerkarte in den Fokus wechselt und weil diese Registerkarte wahrscheinlich so etwas wie ein <StaticContainer> , wird nichts "aufgefrischt", es ist immer noch weiß
(3) Sobald der Benutzer "scrollt", aktualisieren Sie die removeClippedSubviews-Logik, die jetzt bestimmt, dass die Listenzellen sichtbar sind, und aktualisieren sie.

Danke für den Hinweis @gre

existiert noch auf RN 0.41.2, Android ist in Ordnung, nur das ios10, set removeClippedSubviews={false} kann dieses Problem beheben. Mein listView ist klein, also kein großes Problem. Die listView in einem stackNavigator von tabNavigator(react-navigation).

 render() {
    return (
      <View style={{ flex: 1, justifyContent:'center'}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow.bind(this)}
          removeClippedSubviews={false}
        />
      </View>
    );
  }

Gleiches Problem hier. Nichts anderes hinzuzufügen, außer removeClippedSubviews={false} hat es auch für mich gelöst.

@agentilela Danke für den Fix, gleiches Problem hier

Einstellung von removeClippedSubviews={false} behoben

Dieses Problem tritt in React-native-Maps MapView die AFAIK nicht verwendet ScrollView und nichts mit ListView zu tun hat.

Das Problem tritt immer noch in RN44 auf, initialListSize={200} löst das Problem, aber ich glaube nicht, dass es eine gute langfristige Lösung ist, da das Rendern einige Zeit dauert, bevor es angezeigt wird. Dies ist in einer Listenansicht mit mehr als 100 Zeilen offensichtlich.

ps removeClippedSubViews={false} löst mein Problem nicht

removeClippedSubViews={false} hat für mich ListView .
Außerdem hat FlatList das gleiche Problem.

Ich habe das gleiche Problem mit ListView/FlatList und Reagieren-Navigation.
Ich habe es mit lazy: true in den TabNavigator-Optionen und removeClippedSubViews={false} in ListView behoben

Ich kann auch bestätigen, dass der Fehler in RN 0.44.0 auftritt:

Tritt auf, wenn Sie die Reaktionsnavigation + TabNavigator + (ListView oder FlatList) verwenden.
Wenn Sie zu einer Registerkarte gehen, sieht sie leer aus. Erst wenn Sie etwas scrollen, wird die Liste angezeigt.

Die einzige Registerkarte, auf der dies nicht geschieht, befindet sich im initialRouteName des TabNavigators

Wie bereits erwähnt, setze lazy: true auf . der TabNavigator löst dies.

gleiches Problem hier, behoben mit removeClippedSubViews
wie in doppelter Ausgabe beschrieben https://github.com/facebook/react-native/issues/14069
Ich habe ein Repo erstellt, um das Problem https://github.com/jcharlet/react_native_listview_bug zu reproduzieren, wenn es hilfreich sein kann.

Dieses Problem tritt auch nicht auf, wenn für denselben Anwendungsfall 'react-native-router-flux' anstelle von 'react-navigation' verwendet wird

Einige Probleme mit der Reaktionsnavigation in TabNavigator. removeClippedSubViews={false} hilft nicht.

Gleiches Problem bei mir. Verwenden der Reaktionsnavigation mit TabNavigator und einem StackNavigator als untergeordnetes Element in der betreffenden Registerkarte und einfachem ListView. RN 0.44 / Expo 17, und weder removeClippedSubviews noch faul haben mir geholfen :-/

removeClippedSubviews hat mir geholfen, die IOS-Version zu reparieren, aber für Android musste ich initialListSize verwenden

Mit

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.2",
    "react-navigation": "1.0.0-beta.11"
}

und lazy: true in TabNavigator 's TabNavigatorConfig alles gut gerendert:

const AppNavigator = TabNavigator({
  HomeTab: {
    screen: HomeScreen,
    path: '/'
  },
  PeopleTab: {
    screen: PeopleNavigator,
    path: '/people',
  }
}, {
  lazy: true
});

const PeopleList = ({ people }) => {
  return (
    <FlatList
      data={people}
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  );
};

Upgrade auf
{
"reaktiv-nativ": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
hat bei mir funktioniert, lazy=true scheint für StackNavigator nicht erforderlich zu sein

{
"reaktiv-nativ": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
faul = wahr
removeClippedSubViews={false}
funktioniert nicht

Das ist wirklich interessant, ich würde gerne sehen, wann dieser 2-Jahres-Bug endlich geschlossen wird.

Ich habe ein Upgrade auf React-Native 0.44.2, React-Navigation 1.0.0-beta.11 durchgeführt und auf dem fraglichen TabNavigator "lazy=true" gesetzt und das hat es behoben. Vielleicht hätte nur das Setzen von lazy=true den Trick getan, aber ich hatte bereits aktualisiert.

@jhalborg Ich habe das Problem für Listen mit FlatList & removeClippedSubViews={false} behoben.

Ich verwende die Reaktionsnavigation und removeClippedSubViews funktioniert für mich mit dieser Struktur:

Modaler Stapel -> Registerkartenstapel präsentieren -> mehrere Registerkarten mit Navigationsstapeln einschließen

Mein Problem war die mangelnde Leistung, daher habe ich den Wert removeClippedSubViews basierend auf einem Zustandswert vorgenommen, damit ich ihn ein- und ausschalten kann, je nachdem, ob der Bildschirm geladen wird.

Ich habe einige Listen, die auf einer anderen Registerkarte neu geladen werden, also verwende ich Folgendes:

constructor (props) {
   super(props)

   this.state = { removeClippedSubViews: false }
} 

componentDidMount () {
  this.setState({ removeClippedSubViews: true })
}

resetData () {
  const callback = (newRecords) => {
    this.setState({ removeClippedSubViews: true, records: newRecords })
  }

  this.setState({ removeClippedSubViews: false, records: [] }, () => {
    someDataHelper.reloadData(callback)
  })
}

render () {
  return (
    <ListView removeClippedSubViews={this.state. removeClippedSubViews} />
  )
}

Ich hoffe, das hilft jemandem, da es mich eine Weile genervt hat, aber am Ende eine ziemlich einfache Lösung war.

Es sieht so aus, als ob dieses Problem jetzt aus folgenden Gründen geschlossen werden kann:

• Wir empfehlen den Leuten, FlatList/SectionList jetzt zu verwenden, es werden keine Verbesserungen an ListView kommen.
• Es scheint, als ob im Thread ein vernünftiger Workaround gefunden wurde.

Die Gedanken?

Ist das nicht ein echter Bug? Wenn ja, warum das Thema schließen?

Zu den Gründen:

• Es passiert auch auf FlatList, es ist also kein einziges ListView-Problem.

• Das Entfernen von removeClippedSubViews scheint ein Hack mit Leistungskosten zu sein, meiner Meinung nach kein vernünftiger Workaround.

Bestätigung, dass dies immer noch ein aktiver Fehler in FlatList/SectionList ist.

Es gibt auch ein paar Probleme in Bezug auf die Leistung von FlatList/SectionList, was bedeutet, dass einige Leute ListView noch nicht verlassen können, es scheint seltsam, dass es bereits veraltet ist.

Könnte so etwas wie das, was ich oben gepostet habe, in die Komponenten selbst integriert werden?

Welche Probleme hatten Sie bei der Migration von ListView?

13727

Ich sehe keine Besonderheiten, wo ListView besser ist. Beachten Sie, dass Sie die Fenstergröße erhöhen oder die Virtualisierung deaktivieren können, wenn dies für Sie ein Problem darstellt, da ListView dies nicht tut.

Ich würde warten, bis sie auf die Fragen antworten, die Sie gerade gestellt haben, bevor ich fortfahre, aber es ist nebensächlich, dieses Problem tritt immer noch auf FlatList auf und sollte offen bleiben.

Nur für allgemeines Community-Wissen.

Ich bin auf dieses Problem in meinem Szenario gestoßen, in dem ich verschachtelte ListViews, dh ListViews innerhalb einer ListView-Zeile verwende. Meine Lösung wurde behoben, indem removeClippedSubviews={false} auf die verschachtelten ListViews angewendet wurde.

react-native-cli: 2.0.1
react-native: 0.41.2

Es ist unmöglich, in großen Listen mit ListView / FlatList / VirtualizedList / WindowedListView (was auch immer) auf alter Hardware wie iPad 3 / iPad Mini mit iOS 9.x reibungslos zu scrollen.

Hinweis: Ich spreche von flachen Listen, keine Bilder, nur Textkomponenten in Zeilen.

Jemand könnte ein Funktionsbeispiel mit einem Datensatz von 7000 Datensätzen teilen, bei dem das Scrollen glatt und nicht abgehackt ist, ich versuche alle Attributkonfigurationen und kein Glück 😢

Einverstanden - Ich lösche auch nicht sichtbare Zellen für die Speicherverwaltung. Schade, dass es einer so wesentlichen Komponente in vielen Apps für viele Anwendungsfälle so an Leistung fehlt. Ich werde mich in der nächsten Woche oder so eingehend damit befassen, um zu sehen, ob es signifikante Leistungssteigerungen gibt.

Am 10. Juni 2017, 15:30 +1000, schrieb Ariel Falduto [email protected] :

Es ist unmöglich, in großen Listen mit ListView / FlatList / VirtualizedList / WindowedListView (was auch immer) auf alter Hardware wie iPad 3 / iPad Mini mit iOS 9.x reibungslos zu scrollen.
Hinweis: Ich spreche von flachen Listen, keine Bilder, nur Textkomponenten in Zeilen.
Jemand könnte ein Funktionsbeispiel mit einem Datensatz von 7000 Datensätzen teilen, bei dem das Scrollen glatt und nicht abgehackt ist, ich versuche alle Attributkonfigurationen und kein Glück 😢
—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Awesome @lprhodes , hier teile ich einen einfachen Anwendungsfall mit FlatList mit ~ 200 Datensätzen, dieses Beispiel ist auf einem iPad 3 mit iOS 9 abgehackt.

import React, { Component } from 'react';
import {
  FlatList,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  Text,
  ListItem,
  SearchBar,
} from 'react-native-elements';

class Feed extends Component {

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={(list) => { this.flatListRef = list; }}
          debug
          ListHeaderComponent={() => (
            <SearchBar
              lightTheme
              placeholder='Search...' />
          )}
          data={feed.data} // ~217 records
          keyExtractor={(item) => (
            item.code_group
          )}
          renderItem={({ item }) => {
            return (
              <ListItem
                hideChevron
                key={item.code_group}
                title={`${item.name_group_sp}`}
                subtitle={`${item.price_prod}`}
                containerStyle={{ backgroundColor: 'white' }}
              />
            );
          }}
        />
      </View>
    )
  }
}

import catalog from './data/catalog.json'; 

class App extends Component {
  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

oder expo uri: exp://8v-xvw.outatime.skillcase.exp.direct :80

Vielen Dank !!!

Ihr Beispielcode weist viele schlechte Praktiken auf, die in der Dokumentation behandelt werden. Sie erstellen beispielsweise ständig Funktionen neu und binden sie neu, was die CPU belastet und unnötige Neudarstellungen Ihrer Listenelemente verursacht. Sie sollten sicherstellen, dass Ihre ListItem-Komponente eine PureComponent ist, und sicherstellen, dass alle an sie übergebenen Requisiten flach gleich bleiben, um unnötige Neudarstellungen zu vermeiden. Dies gilt auch für den Rest Ihrer App.

Das sollte viel helfen, aber ich kann keine perfekte Leistung auf langsamen Geräten garantieren. Wie viel besser funktionieren andere Apps wie der Webbrowser auf diesen Geräten?

@outaTiME du solltest

Die Rendermethode @lprhodes führt nur eine aus. Übrigens aktualisiere ich den Code mit einigen Best Practices und bin auf einem iPad 3 mit iOS 9 immer noch abgehackt (in iPhone 7 läuft alles reibungslos), mache ich immer etwas falsch @sahrens? danke für deinen Rat.

import React, { Component, PureComponent } from 'react';
import {
  FlatList,
  ListView,
  Text,
  StyleSheet,
  View,
} from 'react-native';
import Expo from 'expo';
import {
  ListItem,
  SearchBar,
} from 'react-native-elements';

class FeedRow extends PureComponent {

  render() {
    const item = this.props.data;
    return (
      <Text>{item.name_group_sp}</Text>
    )
  }

}

class Feed extends Component {

  constructor(props) {
    super(props);
    this.storeListRef = this.storeListRef.bind(this);
  }

  loadFeed() {
    const {data} = this.props;
    const sections = [];
    data.forEach((value, index) => {
      const sectionName = value.name_line_sp;
      const section = sections.find((section) => {
        return section.title === sectionName;
      });
      if (section) {
        section.data.push(value);
      } else {
        sections.push({
          title: sectionName,
          data: [value]
        });
      }
    });
    if (__DEV__) {
      console.log('Sections size', sections.length /*, images.length */);
    }
    return sections[0];
  }

  componentDidMount() {
    this.flatListRef.scrollToOffset({
      animated: false,
      offset: 48
    });
  }

  renderItem(item) {
    return (
      <FeedRow data={item.item} />
    );

  }

  keyExtractor(item) {
    return item.code_group;
  }

  listHeaderComponent() {
    return (
      <SearchBar
        lightTheme
        placeholder='Buscar...' />
    );
  }

  storeListRef(list) {
    this.flatListRef = list;
  }

  render() {
    const feed = this.loadFeed();
    return (
      <View style={{flex: 1}}>
        <Text h5 style={styles.section_title}>{feed.title} ({feed. data.length})</Text>
        <FlatList
          style={{flex: 1}}
          ref={this.storeListRef}
          debug
          // pagingEnabled
          ListHeaderComponent={this.listHeaderComponent}
          data={feed.data} // ~217 records
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
        />
      </View>
    )
  }

}

import catalog from './data/catalog.json';

class App extends Component {

  render() {
    const data = catalog;
    return (
      <View style={styles.container}>
        <Text h3 style={styles.title}>Skillcase</Text>
        <Feed data={data} />
      </View>
    );
  }

}

const styles = StyleSheet.create({
  title: {
    margin: 20,
    marginBottom: 10,
    color: 'white'
  },
  section_title: {
    padding: 20,
    color: 'white',
    backgroundColor: '#1976D2',
  },
  container: {
    flex: 1,
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#42A5F5',
  },
});

Expo.registerRootComponent(App);

Besser, aber die Einstellung von debug wird die Dinge um einiges verlangsamen. Sie sollten auch sicherstellen, dass Sie bei der Leistungsbewertung einen optimierten Produktions-Build und keinen Entwicklungs-/Debug-Build ausführen. Schließlich erstellen Sie immer noch bei jedem Rendering ein neues Stilobjekt, und Sie können initialScrollPosition verwenden, anstatt scrollToOffset in onMount aufzurufen.

@sahrens yup ohne das debug Flag und mit der Optimierung der Produktion läuft der Build besser, weniger abgehackt, wie ich schon sagte, bevor ich expo 17 verwende, das reaktiv-native 0.44 verwendet, ich denke, die neue Version von reaktiv-native (0.45 .) ) hat Verbesserungen auf dem FlatList .

Übrigens, warum werden Stile in jedem Rendering erstellt? In diesem Fall wird das Rendern mit den flex Stilen (in der Feed Komponente) nur einmal ausgeführt:

1. App rendern
2. Feed rendern
3. Dann mehrere FeedRow rendern

Sehr ähnlich zu dem, was @lprhodes mir über den loadFeed bei jedem Rendering gesagt hat, verstehe ich, dass das Feed Rendering nur einmal ausgeführt wird, ist das richtig?

Wenn Sie initialScrollPosition sagen, meinen Sie initialScrollIndex richtig? es funktioniert nicht wie scrollToOffset Ich muss die ListHeaderComponent (48px Höhe) verstecken, wenn Feed montiert wird

Was ist mit dieser Konsolenwarnung? Ich verwende eine PureComponent für renderItem richtig?

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":85588,"prevDt":1497296394821,"contentLength":10023}

Vielen Dank !!

Diese Warnung ist eine Art Fehler, der auf master behoben wurde, aber 85 Sekunden für Ihr anfängliches Mounten sind wahnsinnig langsam - Sie sollten wirklich tiefer in Ihren Code graben, um herauszufinden, was so lange dauert. Es gibt viele Ressourcen, wenn Sie nach der Reaktionsleistung googeln oder in der breiteren React-Community nach Hilfe fragen.

Und ja, ich meinte initialScrollIndex . Sie müssen getItemLayout implementieren, damit es funktioniert, was ListHeaderComponent .

toll @sahrens , ich habe Angst vor alter Hardware wie iPad 3 oder OS Version iOS 9 ... beim Testen auf neueren Geräten gibt es keine Leistungsprobleme, ich wollte wissen, ob noch jemand das gleiche Hardwareproblem hat ... In einer Weile Ich werde die Community fragen, ob ich zu etwas tieferem komme, danke !!!

Hallo, meins wurde behoben, indem ich style={{ backgroundColor: 'white' }} an die flache Liste gegeben habe

Also @hramos & @sahrens , was genau ist der beste Workaround für dieses Problem mit FlatList? Wenn ich darauf stoße, reagiere 0.44.0 mit react-native-tab-vew , und es ist nicht wirklich klar, was das Kernteam derzeit empfiehlt.

@sjmueller hat gesagt , dass dies bereits im Master behoben ist?

@hramos Ich habe gerade diesen ganzen Thread noch einmal überprüft. Ich habe es vielleicht übersehen, aber nirgendwo habe ich gesehen, dass @sahrens erwähnt hat, dass FlatList unsichtbar wird, ist auf Master fixiert. Ich habe auch keinen Commit/PR gesehen, der auf dieses Problem verweist, und schließlich keine empfohlene Problemumgehung zur Behebung des Problems.

Ich sehe, dass @yaronlevi empfiehlt, lazy={true} auf react-native-tab-view oder TabNavigator einzustellen, aber das führt selbst auf einem iPhone 7 plus zu sprunghaften Verzögerungen.

@knappdev sagt, dass es ohne lazy auf 0.44.2 und höher funktioniert, also werde ich versuchen, von 0.44.0 zu aktualisieren und zu sehen, ob ich Erfolg habe.

Meine Abhilfe besteht darin, removeClippedSubviews ein- oder auszuschalten, je nachdem, ob die Flatlist verwendet wird oder nicht.

  constructor (props) {
    super(props)

    this.state = { removeClippedSubviews: false }

    this._disableRemoveClippedSubviews = this._disableRemoveClippedSubviews.bind(this)
    this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this)
    this._renderItem = this._renderItem.bind(this)
  }

  _disableRemoveClippedSubviews () {
    this.setState({ removeClippedSubviews: false })
  }

  _onViewableItemsChanged({ viewableItems, changed }) {
    if (!this.state.removeClippedSubviews) this.setState({ removeClippedSubviews: true })
    if (this._disableRemoveClippedSubviewsTimeout) clearTimeout(this._disableRemoveClippedSubviewsTimeout)
    this._disableRemoveClippedSubviewsTimeout = setTimeout(this._disableRemoveClippedSubviews, 3000)
  }

  render () {    
    const { removeClippedSubviews } = this.state

    return (
      <FlatList
        renderItem={this._renderItem}
        removeClippedSubviews={removeClippedSubviews}
        onViewableItemsChanged={this. _onViewableItemsChanged}
      />
    )
  }

removeClippedSubviews ist jetzt standardmäßig für FlatList deaktiviert.

Haben Sie bei Problemen mit langsamen Geräten die RNTester-App FlatListExample ausprobiert?

Wie funktioniert FlatListExample für Sie?

removeClippedSubviews ist jetzt standardmäßig für FlatList deaktiviert.

Ja - deswegen schalte ich es beim eigentlichen Scrollen ein. Auf diese Weise bekomme ich weniger zufällige Jitter.

Ich ersetze dann (weit) nicht sichtbare Zellen durch leere, um den mitgehörten Speicher weiter zu reduzieren, als es FlatList selbst tut

Also, endlich, immer noch keine Möglichkeit, es zu beheben, anstatt removeClippedSubviews={false} wenn es so viel Leistung kostet?

Die Lösung für mich bestand darin, das Debuggen von js aus der Ferne für den iOS-Simulator zu deaktivieren

Die Einstellung von lazy: true scheint bei mir funktioniert zu haben. Perf noch nicht getestet.

Ich löse dieses Problem um removeClippedSubViews={false}

BESTE ARBEIT UM
Funktioniert auf allen Hardware/Simulatoren. removeClippedSubViews={false} funktioniert nicht immer auf dem iPhone 7.

Stellen Sie sicher, dass Sie die Bewegung in der Listenansicht erzwingen.

componentDidMount() {
   requestAnimationFrame(() => {
      // HACK TO RELOAD DATA
      this.refs._list.scrollTo({x: 1, y: 0, animated: false})
    });
}

Referenzbeispiel.

 <ListView
     ref="_list"
     dataSource={this.state.dataSource}
     renderRow={(data, sectionId, rowId) => <Row
        rowId={rowId}
        selectedRow={this.state.selectedRow}
        onPressRow={this._pressRow.bind(this)}
        {...data}/>}
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
     removeClippedSubViews={false}
     initialListSize={SortedBrandList.count}/>

Das Problem ist, dass es möglicherweise bereits montiert wurde

Am 24. August 2017 um 15:44 Uhr schrieb Peter Suwara [email protected] :

UMARBEITEN
Funktioniert auf allen Hardware/Simulatoren.

'''KomponenteDidMount() {
requestAnimationFrame(() => {
// HACK, UM DATEN NEU ZU LADEN
this.refs._list.scrollTo({x: 1, y: 0, animiert: false})
});
}'''

'''
ref="_liste"
dataSource={this.state.dataSource}
renderRow={(data, sectionId, rowId) => }
renderSeparator={(sectionId, rowId) => }
removeClippedSubViews={false}
initialListSize={SortedBrandList.count}
/>'''

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder schalten Sie den Thread stumm.

Ich habe dieses Problem, zumindest im Simulator, gelöst mit:

<ListView removeClippedSubViews={false} .... />

Ich vermute hier, dass die Routine, die clippedSubviews verwaltet, nicht richtig auf Grenzen prüft, wenn die ListView gerade nicht auf dem Bildschirm ist. Dies geschieht ziemlich häufig bei jeder ListView-Komponente, die außerhalb des Bildschirms rendert und dann auf dem Bildschirm verschoben wird. Dieser Fehler sollte nicht zu schwer zu beheben sein.

Ich bin mir ziemlich sicher, dass diese Funktion das Problem ist: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

Ich vermute, dass der gemessene Koordinatenraum irgendwo falsch ist. Schau es dir jetzt an.

Dies kann die Lösung sein? https://github.com/facebook/react-native/pull/15669/files

Immer noch keine Lösung dafür?

@petersuwara : was Sie vorgeschlagen haben. Dankeschön. @MattFoley : Wann wird Ihr Fix zum Download verfügbar sein?

Nicht nur für FlatList spezifisch, scheint auch ein Problem beim Laden in eine ListView zu sein.
Ich habe eine Problemumgehung gefunden, indem ich eine leichte Verzögerung beim Festlegen der Datenquelle verwendet habe.

Wenn die Daten aus einer Remotequelle in die Methode componentWillMount geladen werden, wird der folgende Code ausgeführt.
Scheint zu funktionieren:

setTimeout(function(){
       this.updateDataSource(array,newArray)
},30)

updateDataSource = (comments,dataSource) =>{
        this.setState({
            allComments:comments,
            dataSource: this.state.dataSource.cloneWithRows(dataSource),
            isLoading:false

        })
}

Und während der leichten Verzögerung können Sie immer einen Ladebildschirm anzeigen. Es ist so kurz, dass es nicht einmal sichtbar ist.

Ich habe festgestellt, dass die Methode von

Dies tritt bei Komponenten auf, die zwar bereits gemountet sind, z. B. Bildschirmen, die Registerkarten in der Reaktionsnavigation zugewiesen sind, aber aktueller ausgewählt sind - daher bin ich mir nicht sicher, wie eine Änderung von componentWillMount dies beheben könnte.

Meine obige PR scheint das Problem behoben zu haben, aber ich hatte kein Glück, sie einzubinden. Möchte jemand anderes diese PR mitmachen?

@MattFoley Ob es zusammengeführt wird oder nicht. Ich verwende jetzt deinen Code. Und es löst wirklich mein Problem.

Das Konfigurieren von TabNavigator von react-navigation als lazy: true funktioniert auch ... Aber es wäre großartig, wenn dies von react-native behoben würde.

Wenn Sie SectionList oder Flatlist verwenden, verwenden Sie einfach ref = {(ref)=> this.sectionList = ref }
und in Ihrem Code this.sectionList.recordInteraction() - sollte Ihre Ansicht rendern

Der von @MattFoley vorgeschlagene Fix wurde zusammengeführt und ist jetzt Teil der Version 0.50: https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

Ich habe gerade aktualisiert und sehe dieses Problem immer noch bei <ListView /> . Mache ich etwas falsch? Hier ist meine package.json:

  "dependencies": {
    "native-base": "^2.3.1",
    "react": "^16.0.0",
    "react-native": "^0.50.0-rc.1",
    "react-native-linear-gradient": "^2.3.0",
    "react-native-modal": "^4.1.0",
    "react-native-simple-store": "^1.3.0",
    "react-navigation": "^1.0.0-beta.11"
  },

Ich denke, ListView ist mittlerweile veraltet. Es ist besser, es mit FlatList versuchen und zu sehen, was los ist.

Ich glaube, wir sehen dies immer noch bei 0.50.3. Kann das noch jemand bestätigen?

Ich habe dieses Problem behoben, indem ich zu FlatList gewechselt habe.
Am Freitag, 17. November 2017 um 8:39 Colin Ramsay [email protected]
schrieb:

Ich glaube, wir sehen dies immer noch bei 0.50.3. Kann das noch jemand bestätigen?

—
Sie erhalten dies, weil Sie einen Kommentar abgegeben haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

Ah, wir _nutzen_ bereits FlatList.

Dies ist immer noch ein Problem mit 0.50.3. removeClippedSubviews scheint keine Wirkung zu haben. Können wir das bitte wieder öffnen?

Wir haben immer noch ein Problem in 0.50.3. Bitte öffne diesen wieder.

Es tut mir leid, dass ich mich wieder belästige, aber können wir das bitte wieder öffnen? Dies ist ein dringendes Problem.

Bin mit dem neuesten Expo React Native SDK darauf gestoßen. Es passiert nur bei der dritten ListView in einem TabNavigator. Wenn ich die 2. und 3. Seite tausche, ist die neue 3. Seite betroffen. removeClippedSubviews hat es in meinem Fall jedoch behoben.

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); }); hat bei mir funktioniert.

Die Verwendung von this.listView.scrollToEnd() hat nicht funktioniert , also musste ich die Koordinaten des Endes der Liste manuell berechnen, um dann zu scrollTo()

Bei Flatlist kann dies durch die Aktualisierung desselben Arrays verursacht werden. FlatList prüft, ob Daten unterschiedlich sind. Verwenden Sie also unveränderliche Arrays

removeClippedSubviews={false} behebt den Fehler für meinen Fall.

<ListView
            data={this.state.mockData}
            renderRow={(rowData) => this.renderRow(rowData)}
            removeClippedSubviews={false}
 />

@edmengel hat recht. Ich arbeitete an einem Projekt und hatte genau den gleichen Fehler.

Vor dem Scrollen:

Nach dem Scrollen:

React-native-router-flux@^4.0.0-beta.27 wird für die Navigation verwendet und App.js gibt dies zurück. Meine Suchseite enthält eine Listenansicht und hatte diesen Fehler. Es befindet sich auf der dritten Registerkarte.

<Provider store={store}>
        <View style={{flex: 1}}>
            <Router hideNavBar={true}>
                <Scene key="modal" modal>
                    {/* Tab Container */}
                    <Scene key="tabbar" tabs={true} tabBarPosition="bottom" tabBarStyle={{borderTopColor:'black', borderTopWidth:1,backgroundColor:'white'}}>
                      {/*Tabs */}
                        <Scene key="NewPage" component={NewPage} title="NewPage" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="NewPage2" component={NewPage2} title="Newpage2" icon={TabIcon}  hideNavBar={true} />
                        <Scene key="SearchPage" component={SearchPage} title="Search"  hideNavBar={true} />
                    </Scene>
                </Scene>
            </Router>
        </View>
</Provider>

Als ich die Suchseite (die eine Listenansicht enthält) von der dritten Registerkarte auf die zweite Registerkarte geändert habe, funktionierte die Listenansicht einwandfrei.

Habe dafür einen funktionierenden Hack gefunden.

render() {
       setTimeout(() => {
            this.sectionList && this.sectionList.recordInteraction(); 
        }, 50);
        return (
            <SectionList ref={(view) => { this.sectionList = view }} />
        )
}

<Flatlist style={{ flex: 1 }}/>
Dieser Trick funktioniert bei mir.

Gleiches Problem bei 0.55.4 mit ScrollView und ListView . Das Hinzufügen von removeClippedSubviews={false} funktioniert.

Leider ist dies in unserem Fall keine Option, da es erforderlich ist, fehlende Bilder auf Android zu vermeiden https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

Das Hin- und Herscrollen beim Rendern erfolgt nur nach der Navigation, so dass es aussieht, als würde man zu einem zunächst leeren Bildschirm wechseln.

Die Ansicht zu verschieben hat auch nicht geholfen.

Irgendwelche anderen Vorschläge?

Ich habe festgestellt, dass es nur nach einer bestimmten Scroll-Position passiert ...
https://streamable.com/l5arv

Wenn ich chrome-devtools verwende, um die Ansicht zu überprüfen, kann ich sehen, dass alle Unteransichten abgeschnitten sind.

Immer noch stecken, @hramos bitte wieder öffnen.

Haben Sie immer noch ein Problem mit einer so einfachen Funktion? Aus diesem Grund haben wir uns von React Native zurück zu reinem Native-Code bewegt.

Wenn es so einfach ist, helfen Sie bitte mit, um es zu reparieren @petersuwara

Dieses Thema ist seit einiger Zeit geschlossen. Wenn Sie davon betroffen sind, _eröffnen Sie bitte eine neue Ausgabe_ und geben Sie so viele Details wie möglich an. Ich schließe dieses Problem, da das hier gemeldete ursprüngliche Problem behoben wurde und es nicht klar ist, dass jede Person, die danach einen Kommentar abgegeben hat, genau das gleiche Problem hat.

Wir verwenden FlatList _extensiv_ bei Facebook, und intern sind keine Beschwerden dieser Art aufgetaucht. Es ist möglich, dass diese Art von Problem beispielsweise bei einer bestimmten Navigationsbibliothek auftritt. Das Öffnen einer neuen Ausgabe mit weiteren Informationen zu Ihrem Problem, mit einer klaren Liste der Schritte zur Repro oder idealerweise einem kleinen Projekt wäre eine große Hilfe.