+1
まったく同じ問題に遭遇しました。 0.5で動作しましたが、0.6で壊れました。

これは0.7で修正する必要があります

私はまったく同じ問題を経験しました。

cloneWithRowsは正常に動作します。 しかし、cloneWithRowsandSectionsはそうではありません。

cloneWithRowsandSectionsが0.7で機能しないのを見ていますか？

また、initialListSizeをより大きな数値に設定してみることもできます。これは、0.7で修正されていない場合の回避策として役立つ可能性があります。

大きなinitialListSizeは役に立ちません。また、ベンダーが依存しているため、0.7はまだ試していません。 可能になるので、誰かが速くならない場合は、0.7についてお知らせします:)

バージョン0.6のcloneWithRowsで同じ問題が発生していましたが、0.5でも機能していました。

0.7では試していません。 試してみます。 以前にinitialListSizeをより高い数値に設定しようとしても、役に立たなかったことを知っています。

0.7で働いた

0.7.1でも動作しません

バージョン0.7.1のcloneWithRowsで同じ問題が発生する

私にとっては0.7.1でうまく機能します。

0.8.0では機能しません。

まだ使用してcloneWithRowsの代わりにcloneWithRowsAndSections

cloneWithRowsはあなたのために働きますか？ 0.8.0では私には向いていません。

@coderdaveは実際にはcloneWithRowsも機能しません。 私の間違い。

@sahrens @ide @michalraska私のscrollY小道具が更新されていませんでした。 私は基本的に、次のようにスクロールオフセットをコンポーネントに渡そうとしていました。

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

しかし、この行を修正することで、コンポーネントへのscrollY小道具を正常に受け取ることができました。 この変更で他のすべての問題が修正されるのだろうか？

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

私はそれを以下から変更しました：

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

に

var shouldUpdateRow = true;

0.11.0-rcでもこれに気づきました。

問題を再現できる2つの例を次に示します。

行： https ：
行とセクション： https ：

私が思いついた一時的な解決策は、ListView1ptがマウントされたときにスクロールすることでした。

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

テストのために、rnplay.orgの例内のこのセクションのコメントを解除できます。

愚かな質問。 これはNavigatorIOSの使用と関係がありますか？ リストビューがNavigatorIOSの子としてレンダリングされたときに、レンダリングやパディングなどの問題が発生しました。

@jaygarcia例ではNavigatorIOSを使用していないため、そうは思いません。 また、私自身のプロジェクトでは、NavigatorIOSの代わりにNavigatorを使用しています。

+1ですが、現在、ナビゲーターを使用しているときにこの動作が発生しています。 私は0.11を使用しており、cloneWithRowsを使用しています。

回避策として、 @ christopherdroのソリューションを使用する必要がありましたが、アイテムをレンダリングするには十分にスクロールする必要があります（アイテムは大きいです）。

興味深いことに、回避策はこのバグの回避策に関連しています： //github.com/facebook/react-native/issues/1878なので、私の最終的なコードは次のとおりです。

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

わかりました。上記のコードを使用すると、ネストされたScrollViewにいくつかの奇妙なバグが発生しました。マウント後、onScrollイベントがトリガーされ、これらのビューの最初のスクロールオフセットが再配置されました。

まだ0.12.0のバグ。 ビューの階層は次のとおりです。

0.11.0の@Sidniciousと同じ問題。 私のアプリでは、react-nativeの初期バージョンからこの問題が発生しています。 ListView Navigator階層から移動すると、すべてが期待どおりに機能します。

0.13.0-rcを使用して同じ問題が発生しています

私はこれだけで0.13.1この問題があります：

    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>}
    />
    )

私にとって、この問題は0.14.2から0.16.0-rcにアップグレードするときに発生しました。 私のために働いた修正は、ListViewのpageSize小道具を3に設定すること

¯_（ツ）_ /¯

ここで同じ問題が0.15.0で、すべてのトリックを試しましたが、運がありませんでした。 ios 9.1 iphone 6

@ nicklockwood-ここで手伝ってもらえますか？ まだいくつかのバグがあるようです。

0.14、同じ問題

同様のLisViewの問題をリンクする： https ：

別の同様の問題をリンクする： https ：

私はこれを0.16.0で見ています。 誰かがこれをProductPainsのレーダーに載せましたか？ これはかなり痛くなってきています。 ：/

これをProductPainsに投稿しました。 それでも影響がある場合は、自由に投票してください。

0.16、同じ問題

dataSourceでcloneWithRowsを使用すると、0.17でも問題が解決しません。 リストは、スクロールされているときにのみアイテムをレンダリングします。

0.17でも同じ問題が発生していましたが、 removeClippedSubviews無効にすると修正されたようです。

+1
0.17でも同じ問題が発生していましたが、removeClippedSubviewsを無効にすると修正されたようです。

私にとっては、 removeClippedSubviews有無にかかわらず、0.17でも発生します。 私が気付いたのは、私の問題が手動で設定されたcontentOffsetとinitialListSize関連している可能性があるということinitialListSizeに対してレンダリングされる要素の高さを超えている場合、ユーザーがスクロールするまで必要な要素はレンダリングされません。

flexDirection: 'row'設定されているリストにも問題があるようです。 このプロパティを削除すると、すべてのアイテムがレンダリングされます。 設定されている場合、リストは最初に2つのアイテムのみをレンダリングします。

ナビゲーター使用時のremoveClippedSubviews問題の場合。
問題が発生しないhttps://github.com/machard/react-native-advanced-navigationを確認することをお勧めします（おそらく、ビューが実際に画面に表示された後、レンダリングが遅れているためです）

contentContainerStyleプロパティに設定されたflexDirection: 'row'とflexWrap: 'wrap'も問題があります。 私にとって有効な回避策は、 pageSizeです。

react-nativeバージョン： 0.19.0

@jittuuがpageSizeプロップを設定してくれてありがとう！

pageSizeを何に設定しますか？

@greそれはあなたのレイアウトに依存します。 ビューが行に配置されている場合、pageSizeは行ごとのアイテムの倍数である必要があります。 正確な値を試して、パフォーマンスにどのように影響するかを確認できます。

また、initialListSizeを画面全体に表示するのに十分な大きさに設定する必要があります。

このコミットの説明が役立つ場合があります： https ：

@jittuuこれは私のために働いた。 flexWrapを使用しているときにもバグが発生していました。

ありがとう@jittuu値2で

リストビューをスクロールしてアプリをナビゲートして戻ると、まだ問題が発生します。
pageSizeは役に立ちませんでした（1から60までの異なる値を試しました）。

@gre initialListSizeを十分に大きく設定していますか？ 表示できるレポはありますか？

@jaygarcia @nicklockwoodこのバグを再現するデモがあります。リポジトリのURL： ListNotRender

ステップ：

1. アプリを開きます。
2. タブバー項目「＃1」をクリックします。
3. リストアイテムはスクロールするまでレンダリングされません。

このバグはListViewのremoveClippedSubviewsプロップに関連していると確信しており、このバグはtrueに設定されている場合にのみ発生します。

これは、RN0.26.0でも引き続き発生しています。 ここで同じ状況：

• removeClippedSubviews={true}
• ListViewは画面外にレンダリングされます
• その画面に移動すると、ユーザーがリストビューを操作するまでリストビューがスリップします

cc @javache

これはhttps://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60eで修正されていると思い

@javache手動でその行をローカルに追加しましたが、問題は修正されませんでした。

https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7にもこれを適用しましたが、成功しませんでした。 ;）

RN 0.28に加えて単一のhttps://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60eコミットを行うと、私にとってもバグが発生します。

これについて少し調べてみると、ListViewが表示されなくなった場合でも、バックグラウンドで（たとえば、スクロールの更新中に）更新されているのではないかと思います。

実際、ビューをスクロールするとバグは簡単に再現できるので、 「重力」でまで、全画面が白くなります。
しかし、それは基本的にこのバグが私に起こったときの唯一のシナリオです。 これは〜誰にとっても同じ再現シナリオですか、それともバグはこれよりも広いですか？

そのシナリオは、 @ janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment-22799032からそれほど遠くありません。

このバグの理由を理解するのは難しいですが、ここに私の2セントがあります：

バックグラウンドで行が_白_にレンダリングされるようです。 スクロールビューを再び表示する場合_（例：戻る）_、それらはまだ白であり、_（更新する理由がないため、キャッシュされます）_新しいスクロールが発生するまで更新されません。

ScrollViewがまだ表示されている場合にのみ子（ updateClippedSubviews ？）をレンダリングする場合、バグは修正されますか？ （行がバックグラウンドでレンダリングされない場合、行が再び白く表示されることはありません）

@javache 1fcd73fは、

バグを再現する簡単な方法を見つけました。

1. removeClippedSubViews = trueでListViewを表示します。
2. 行をタッチして次のページに入ります。
3. 画面の向きを90回転させます。
4. 画面を元に戻します。
5. ListView画面に戻ります。

ListViewは空白になり、行が1画面より多くなり、スクロールするとListViewが再表示され、行が1画面より少なくなります。スクロールしても、ListViewは何も再表示できません。 1fcd73fスクロールを使用すると、ListViewは再表示できます:)

1. 0.26.3の時点でまだこの問題が発生しています
2. RN以外のプロジェクトで、ネイティブAndroidで問題が発生しました。

私たちが選んだ解決策は、scrollTo1pxシフトを前後にonRefreshすることでした。 これは回避策ですが、どちらの場合も機能しました。

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

@JBerendesはい、このハックは機能します。

これは、ユーザーのスクロールを壊さない、より洗練された回避策です。

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();
  };

}

ListViewの抽象化を入れます。 次に、適切な時間にscrollHackToWorkaroundWhiteBugを呼び出す必要があります。 私にとっては、画面を変更するたびに（移行の前後に）です。

これはListViewのscrollRenderAheadDistance関連していると思います（タッチした後にレンダリングされていない行をレンダリングするため）。 scrollRenderAheadDistanceを1800より大きい値に設定することで修正できました。 scrollRenderAheadDistanceとレンダリングされる行数の間には確かに相関関係がありますが、一貫性がありません。 通常、次のようにレンダリングされることがわかりました（ただし、すべての行がレンダリングされる場合もあります）。

| scrollRenderAheadDistance | レンダリングされた行数|
| --- | --- |
| 1000 | 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7歳以上|

高さ80ptの行でListViewをレンダリングしています。 ListViewに正確に正しいscrollRenderAheadDistanceを設定するのに役立つ式を導き出しました。

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

ただし、 680 （または340 * 2 ）の重要性がわかりません。

編集：このソリューションはデバッグでは機能しますが、リリーススキームでは機能しません（iOSの場合）...

わかりました。 removeClippedSubviewsをfalseに設定すると、問題が解決します。

0.26から0.29にアップグレードするまでこれに遭遇しなかったので、0.27、0.28、または0.29で何かが導入されました（0.27または0.28に対してはまだテストしていませんが、それが役立つ場合は可能です）。

@gnestor 0.29で壊れています、＃8607とhttps://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7を確認して

@ gnestor @ nihgwuバグは最近のリグレッションではないと確信しています。 この問題は1年前に作成されたもので、私はRN 0.13以降個人的に経験しており、ListViewで「生き残る」ために常に回避策を使用していました。 removeClippedSubviewsを使用しないと、大きなリストが遅れます。
おそらくそれを修正するか、少なくともバグが発生するケースを減らす試みがありましたが、これはこの最初の問題メッセージで報告されたものとほぼ同じように発生します。

@greですが、＃8607は0.29で導入されたと思います。空白のビューに移動するのは本当に面倒です。https：//github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7の変更を元に戻すだけで、すべてがうまく機能しremoveClippedSubviewsオフにせずに前に

initialListSizeを適切な値に設定し、 removeClippedSubviewsをfalseに設定して問題を解決します

0.28から0.29にアップグレードした後、この問題が発生しました。
removeClippedSubviews={false}で問題が解決しました。
また、私の場合、 componentDidUpdate() ListView高さを更新しています。
高さ更新コードをcomponentDidUpdate()でsetTimeoutでラップし、カスタムタイムアウトを使用することも役立ちます。

私もこれを経験しましたが、ローカルデータが入力されたのは1つのListViewにありました。 私もこれをiOSでしか見ていませんでしたが、0.29にアップグレードした後です。 問題のListViewはthis.state.dataSource.cloneWithRowsAndSections 、 componentDidMountはロード時です。

そして、 removeClippedSubviews={false}がこれに対処しました。

ListViewコンポーネントにremoveClippedSubviewsを設定することも、私にとってはうまくいきました。 デフォルトのNavigatorコンポーネントを使用している場合、 0.29のReleaseスキームでのみこの問題が発生していました。

同じ問題があります。flexDirection： 'row'とflexWrap： 'wrap'を設定しました。RN0.29.2を使用しています。 他のリストビュー（flexDirection： 'row'を設定していない場合）では、その問題はありません。

他の投稿者が言っているような簡単な修正は、適切なinitialListSizeとpageSizeを設定することですが、たとえば、リストビュー内にあるアイテムのリストの一部だけを表示するフィルターがある場合、これらはアプリの応答性を低下させると思います、リストビューが表示領域全体を再レンダリングしようとしているため、フィルター間のタップは遅くなります。

他のリストビューでは、initialListSize = 0 pageSize = 1を設定することでこれを解決しました。 しかし、グリッドリストビューにはできません（flexDirection： 'row'およびflexWrap： 'wrap'）。

私はRNv0.31.0-rc.0でこれを打っています。

removeClippedSubviews = {false}を追加すると、問題が修正されたようです。

「removeClippedSubviews = {false}」は適切な解決策ではないようです。すべての行がレンダリングされ、メモリ管理の問題が発生します。 「listView.scrollTo」と「removeClippedSubviews」以外の誰かがより良い解決策を持っていますか？

この問題は、RN0.31のiOS10ベータ版でははるかに深刻です:-(

removeClippedSubviewsはAndroidで役に立ちませんScrollViewた。代わりに、 ListViewからScrollViewに移動する必要がありました。

本当に大きなバグ。 私も会いました。

全員が製品の問題に賛成するようにしてください。 それはすでにかなり高いですが、まだ誰かの受信トレイに着陸するのに十分な高さではありません:-(ここにリンクがあります

この時点で、これはおそらく＃8607と同じ問題だと思います。 それに取り組む方法についての私の計画のためにそれをチェックしてください。

0.33.0に存在し続けます

0.32にまだ存在します

私は昨日このバグに遭遇し、 removeClippedSubviews = {false}設定

0.33で+1

ええ、私に、同じ問題！ +1
0.33、
編集：
removeClippedSubviews = {false}、私も問題を修正しました。

+1

このパッチhttps://gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e（＃8607から）を試して、この問題に役立つかどうか教えて

@majakこのパッチを共有していただきありがとうございます。 適用するだけで、この問題はなくなりました（RN0.34）。

@majakこれは私にとってもそれを修正するようです、良い仕事です！

これはRN34でremoveClippedSubviews={true}

React Native0.34でこの問題が発生しました。
この問題は、次の場合にのみ発生しました。

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

リストビューのスタイリング。

initialListSize={100}
私のためにそれを修正しました

@majakそのパッチでPRを作成する予定ですか？

@janmonschkeうん！ リンクされた問題に従って更新を確認してください。

React Native0.36でこの問題が発生しました

これが0.36に発生することを確認できます

エミュレーターで、デバッグモードでのみ完全に機能しますが、デバイスでは機能しません。 このリストはデバイスでは機能せず、上記の推奨事項をすべて試し、 ListViewをScrollViewに置き換えても、Androidデバイスに表示されるのはナビゲーターだけです。 （リストをナビゲーターの外に置いてみても）
0.37

私はまだ0.36で問題を見つけることができますが、回避策に感謝します！

私はまだ0.36.1でそれを見ています

私はまだ0.36.1でそれを見ています

0.31に存在する
initialListSize={1}私のためにそれを解決します

React Native0.38でこの問題が発生しました

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

これにより、バージョン0.38の問題が修正されますが、以前のバージョンでも機能するかどうかはわかりません。
これはバージョン0.38で問題をアーカイブします、私は初期のバージョンで動作するかどうかわかりません

この問題は0.36に存在します。
removeClippedSubviews = {false}およびinitialListSize = {8}では機能しませんでした

1年以上経ちましたが、この号はまだ未解決ですか？

0.39にまだ存在します。 removeClippedSubviews = {false}機能します。

「removeClippedSubviews = {false}」は良い解決策ではないようです。新しい解決策があり、うまくいきます。 PaltformiOS。 RCTView.mファイル

PRを作成する必要がありますか？

RN0.40でテストした人はいますか？RN0.40にアップグレードした後、この問題は発生しなくなりました。

この問題は存在します。
1、removeClippedSubViews = trueでListViewを表示します。
2、行をタッチして次のページに入ります。
3、画面の向きを90回転させます。
4、ListView画面に戻る。

ListViewは空白になり、1画面以上の行が表示されます。スクロールすると、ListViewが再表示されます。

@endpress RN0.41RC0を使用して、手順を実行しましたが、まだ再現できません。

0.38でこの問題が発生します。

私の回避策は、ListViewのpaddingTopを0から1の間で変更することです。これにより、ListViewは毎回更新されます。

backgroundColor、borderなどを変更してみてください。他のプロパティが機能するかどうかをお知らせください。

@nihgwuはまだ

これが問題です

@endpressの変更（https://github.com/facebook/react-native/issues/1831#issuecomment-270552011）は私の場合に機能し、facebook / react-native＃8607にも役立つ可能性があります。
パッチはまだ完璧にはほど遠いかもしれませんが、PRを作成することをお勧めします。

私にとっては、initialListSize = {0}を設定しても、それはrn0.40.0に修正されます。

@majakこの致命的な問題に何か良いニュースはありますか？

https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32はどうですか？

FlatListはまだ実験段階であるため、バグが少ないことや、下位互換性のない方法で変更されることを保証するものではありませんが、自己責任で試すことができます。

@sahrens @gre古いリストビューと同じAPIを提供するFlatListの上に抽象レイヤーを構築して、古いアプリケーションコードを同じに保つことは可能ですか。

@sahrens FlatListはUITableViewで実装されていますか？

FlatListが安定し、実験的でなくなったら、ListViewと同じAPIを使用してアダプターを作成するか、内部でListViewの実装を交換する可能性があります。

UITableViewは使用しません。 実際には、新しいネイティブコードはまったく使用されていません。すべて、既存のネイティブ/フレームワークプリミティブを使用したJSのみです。実装は次の場所で確認できます： https ：

@sahrensありがとうございます。とてもクールで便利です。

@savanthongvanhが初期サイズを0に設定すると、初期ロード時にListView内のすべてのアイテムがレンダリングされる効果があります。 アイテムが多い場合は注意してください。

また、このrn0.41.2を処理します。 誰かが私がコピーできるFlatLIstの簡単な実装を持っていて、本当にすぐに解決策を望んでいますか？
ありがとう、
ロン

FlatList（およびVirtualizedList）は、それらを試してみたい場合はマスターになっています。

これを扱っている人のためにFlatListを今すぐ始める簡単な方法は次のとおりです： https ：//hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

initialListSizeを適切な値に設定し、removeClippedSubviewsをfalseに設定して問題を解決します

@hoperceに感謝しremoveClippedSubviewsは私のために働きます、 initialListSizeは途切れ途切れのスクロールを引き起こします

私はRN.42を持っていますが、FlatListの実験的なライブラリがここに表示されないため、この問題でアップグレードできるようになるまで（しばらくの間ではありません）スタックします。

最新バージョンのRNを使用していない場合でも、FlatListコードをアプリにいつでもコピーできます。

FlatListを使用すると、「戻ると全景が白くなる」バグを再現できます。 ScrollViewとの関連性が低いのではないかと思います。

一時的に白くなる問題は、FlatListとはまったく異なり、固有のものです。 私たちはそれを軽減するために取り組んでいますが、それは非同期ウィンドウレンダリングのトリッキーな結果です。 この問題が参照するバグは、ユーザーがスクロールするまで最初のレンダリングでコンテンツが表示されないことです。これはFlatListで修正されることを願っています。

ListView（およびFlatList）でもこの問題が発生しました。

ビューのコンストラクターでデータソースを[]にリセットしてから、setTimeout（）内のアイテムのリストにリセットすることで、リストを正しくレンダリングできることを発見しました。

参考までに私のリストビューは、TabNavigatorのReactNavigationStackNavigatorに埋め込まれています。

また、プログラムで1pxスクロールをトリガーするハックは、ListView / FlatListの両方で引き続き機能します。 ただし、適切なライフサイクルで呼び出す必要があります（通常は画面に戻ったとき）。

@gre ：

@gre 、そのためのサンプルコードはありますか？ そして、ListViewを含むそのコンポーネントのcomponentWillMountを意味しますか？

@ ericvicenti -RNから他のかなりの数のコードが必要なようです。 他の場所から少しずつ借りてしまうのではないかと心配でした。 抜くかもしれません。 たぶん、他の人が使用できるようにレポにそれを投げます-それは許可されていますか？

@sahrens申し訳ありませんが、会社のアプリにありますが、空白の例を作成して再現することもできます。

コメントの少し上の@natdm： https ：

SectionListでこの問題が発生しています-スクロールするまで最初のレンダリングで空白になります。 @sahrens修正はありますか？

@smkhalsa明確な再現はありますか？ removeClippedSubviews = {false}を設定しますか

@sahrens removeClippedSubviews = {false}を設定すると、これが修正されるようです。 これがないと、この特定のビューに移動するたびに空白の画面が表示されます。

新しいレポで問題を切り分けて、可能であれば投稿します。

私にとっても同じです（removeClippedSubviewsは間違いなくバグのトリガーです）。 私たちのアプリには、react-native-tab-view内にリストがある簡単な再現がありました。 しかし、もっと簡単な例でそれを再現できるかどうかはわかりません。

ここで私の答えの最後の2つの段落を参照してくださいhttps://github.com/facebook/react-native/issues/1831#issuecomment-228775913

私はそれがその周りの何かかもしれないと思います（単なる仮説）：

（1）リストは「バウンディングボックスの外にある」ため、バックグラウンドタブでレンダリングされます。removeClippedSubviewsは、リストがここにないと想定し、何もレンダリングしません（白）
（2）タブがフォーカスに移動し、そのタブがおそらく<StaticContainer>ようなものを使用しているため、何も「更新」されないため、まだ白です。
（3）ユーザーが「スクロール」するとすぐに、removeClippedSubviewsロジックを更新します。これにより、リストセルが表示されていると判断され、更新されます。

リード@greをありがとう

RN 0.41.2にはまだ存在し、androidは問題ありません。ios10だけで、removeClippedSubviews = {false}を設定するとこの問題を解決できます。 私のlistViewは小さいので、大きな問題ではありません。 tabNavigator（react-navigation）のstackNavigator内のlistView。

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

ここで同じ問題。 removeClippedSubviews = {false}以外に追加するものは、私にとっても解決しませんでした。

@agentilela修正していただきありがとうございます、同じ問題がここにあります

removeClippedSubviews={false}設定すると修正されました

反応ネイティブが-マップでこの問題が存在するMapView私の知る限りでは使用しませんScrollViewしてとは何の関係もありませんListView 。

この問題はRN44でも引き続き発生しており、 initialListSize={200}問題は解決しますが、表示するまでにレンダリングに時間がかかるため、長期的な解決策としては適切ではないと思います。 100行を超えるリストビューでは明らかです。

ps removeClippedSubViews={false}は私の問題を解決しません

removeClippedSubViews={false}はListViewで私のために働いた。
また、 FlatListにも同じ問題があります。

ListView / FlatListとreact-navigationでも同じ問題があります。
私はそれを修正しましたlazy: true TabNavigatorコンテナオプションとでremoveClippedSubViews={false} ListViewコントロールで

RN0.44.0でバグが発生していることも確認できます。

react-navigation + TabNavigator +（ListViewまたはFlatList）を使用すると発生します。
タブに移動すると、空に見えます。 少しスクロールするとリストが表示されます。

それが発生していない唯一のタブは、TabNavigatorのinitialRouteNameにあります

前述のように、lazy：trueを設定します。 TabNavigatorはこれを解決します。

ここでも同じ問題があり、removeClippedSubViewsで修正されました
重複する問題https://github.com/facebook/react-native/issues/14069で説明されているように
問題を再現するためのリポジトリを作成しましたhttps://github.com/jcharlet/react_native_listview_bug何か助けになることがあれば。

また、同じユースケースで「react-navigation」の代わりに「react-native-router-flux」を使用した場合、この問題は発生しません。

TabNavigatorのreact-navigationに関するいくつかの問題。 removeClippedSubViews = {false}は役に立ちません。

私にとっても同じ問題です。 問題のタブの子としてTabNavigatorとStackNavigator、およびプレーンなListViewでreact-navigationを使用します。 RN 0.44 / Expo 17、そしてremoveClippedSubviewsも怠惰も私を助けませんでした：-/

removeClippedSubviewsはIOSバージョンの修正に役立ちましたが、Androidの場合はinitialListSizeを使用する必要がありました

と

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

そしてlazy: trueでTabNavigatorのTabNavigatorConfigすべてがうまくレンダリング：

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>}
    />
  );
};

にアップグレードする
{{
"react-native"： "0.44.2"、
"react-navigation"： "1.0.0-beta.11"
}
私のために働いた、lazy = trueはStackNavigatorには必要ないようです

{{
"react-native"： "0.44.2"、
"react-navigation"： "1.0.0-beta.11"
}
lazy = true
removeClippedSubViews = {false}
動作しません

これは本当に興味深いことです。この2年間のバグが最終的にクローズされる時期を確認したいと思います。

私はreact-native0.44.2、react-navigation 1.0.0-beta.11にアップグレードし、問題のTabNavigatorで「lazy = true」を設定すると、それが修正されました。 おそらくlazy = trueを設定するだけでうまくいくでしょうが、私はすでに更新していました。

@jhalborg FlatList＆removeClippedSubViews = {false}のリストの問題を修正しました。

私はreact-navigationを使用しており、removeClippedSubViewsは次の構造で機能します。

モーダルスタック->現在のタブスタック->ナビゲーションスタックを含む複数のタブを含める

私の問題はパフォーマンスの欠如だったので、状態値に基づいてremoveClippedSubViews値を作成し、画面が読み込まれているかどうかに応じてオン/オフを切り替えることができるようにしました。

別のタブでリロードするリストがあるので、次のようなものを使用します。

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} />
  )
}

しばらくの間私を悩ませていたが、結局はかなり単純な解決策になったので、これが誰かに役立つことを願っています。

次の理由により、この問題を解決できるようになりました。

• 今すぐFlatList / SectionListを使用することをお勧めします。ListViewには、機能拡張はありません。
• スレッドで妥当な回避策が特定されているようです。

考え？

これは本当のバグではありませんか？ はいの場合、なぜ問題をクローズするのですか？

理由について：

• FlatListでも発生するため、ListViewだけの問題ではありません。

• removeClippedSubViews削除することは、パフォーマンスコストを伴うハックのように思われ、私の意見では合理的な回避策ではありません。

これがFlatList / SectionList内のアクティブなバグであることを確認します。

FlatList / SectionListのパフォーマンスに関連するいくつかの問題もあります。これは、一部の人がまだListViewから移動できないことを意味し、すでに非推奨になっているようです。

上で投稿したようなものをコンポーネント自体に統合できますか？

ListViewからの移行でどのような問題が発生しましたか？

13727

ListViewが優れている場所の詳細は表示されません。 ListViewはそれを行わないため、問題が発生した場合は、ウィンドウサイズを大きくするか、仮想化をオフにすることができます。

先に進む前に、あなたが尋ねた質問に彼らが答えるのを待ちますが、それは重要ではありません。この問題はまだFlatListで発生しており、開いたままにしておく必要があります。

一般的なコミュニティの知識のためだけに。

この問題は、ネストされたListView、つまりListView行内のListViewを使用しているシナリオで発生しました。 私の解決策は、ネストされたListViewにremoveClippedSubviews={false}を適用することで修正されました。

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

iOS9.xを実行しているiPad3 / iPadMiniなどの古いハードウェアでListView / FlatList / VirtualizedList / WindowedListView（何でも）を使用して大きなリストをスムーズにスクロールすることは不可能です。

注：フラットリストについて話しているのですが、画像はなく、行のテキストコンポーネントのみです。

誰かが7000レコードのデータセットと機能例を共有する可能性があります。スクロールはスムーズで途切れることはありません。すべての属性構成を試してみてください。運が悪いです😢

同意しました-メモリ管理のために、見えないセルもクリアしています。 多くのアプリでこのような重要なコンポーネントが多くのユースケースでパフォーマンスに欠けているのは残念です。 来週かそこらで深く掘り下げて、パフォーマンスが大幅に向上するかどうかを確認します。

2017年6月10日には、午後3:30 +1000、アリエルFaldutoの[email protected]は、書きました：

iOS9.xを実行しているiPad3 / iPadMiniなどの古いハードウェアでListView / FlatList / VirtualizedList / WindowedListView（何でも）を使用して大きなリストをスムーズにスクロールすることは不可能です。
注：フラットリストについて話しているのですが、画像はなく、行のテキストコンポーネントのみです。
誰かが7000レコードのデータセットと機能例を共有する可能性があります。スクロールはスムーズで途切れることはありません。すべての属性構成を試してみてください。運が悪いです😢
—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

素晴らしい@lprhodes 、ここでは、最大200レコードのFlatListを使用した簡単な使用例を共有します。この例は、iOS9を搭載したiPad3では途切れ途切れです。

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);

またはexpouri ：

ありがとう ！！！

サンプルコードには、ドキュメントで対処されている多くの悪い習慣があります。 たとえば、関数を絶えず再作成および再バインドしている場合、これはCPUに負担がかかり、リストアイテムの不要な再レンダリングが発生します。 ListItemコンポーネントがPureComponentであることを確認し、渡されたすべての小道具が浅いままであることを確認する必要があります。これは、不要な再レンダリングを防ぐためです。 アプリの残りの部分にもお勧めします。

それは大いに役立つはずですが、遅いデバイスで完璧なパフォーマンスを保証することはできません。 Webブラウザのような他のアプリはこれらのデバイスでどれだけうまく機能しますか？

@outaTiMEまた、各レンダリングでloadFeedを呼び出すべきではありません

@lprhodesレンダリングメソッドは1つしか実行しませんが、いくつかのベストプラクティスを使用してコードを更新し、

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);

より良いですが、 debugを設定すると、処理速度が大幅に低下します。 また、パフォーマンスを評価するときは、開発/デバッグビルドではなく、最適化された本番ビルドを実行していることを確認する必要があります。 最後に、レンダリングごとに新しいスタイルオブジェクトを作成しているので、onMountでscrollToOffsetを呼び出す代わりにinitialScrollPositionを使用できます。

@sahrens yup debugフラグがなく、本番ビルドの最適化を使用すると、react- native0.44を使用するexpo17を使用する前に言ったように、動作の途切れが少なくなります。新しいバージョンのreact-native（0.45 ） FlatListが改善されました。

ところで、なぜスタイルはすべてのレンダリングで作成されるのですか？ この場合、（ Feedコンポーネント内の） flexスタイルのレンダリングは1回だけ実行されます。

1. Appレンダリング
2. Feedレンダリング
3. 次に、複数のFeedRowレンダリング

@lprhodesは私がいることを理解し、それぞれのレンダリングにloadFeedについて私に言ったことに非常によく似Feedレンダリングは1回だけ実行され、これは正しいでしょうか？

initialScrollPositionと言うときは、 initialScrollIndexことですか？ scrollToOffsetようには機能しませんFeedマウントされるときにListHeaderComponent （高さ48px）を非表示にする必要があります

このコンソールの警告はどうですか？ renderItemにPureComponentを使用していますか？

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}

ありがとう ！！

この警告はマスターで修正された一種のバグですが、最初のマウントの85秒は非常に遅いので、コードを深く掘り下げて、何がそんなに時間がかかっているのかを理解する必要があります。 あなたがreactのパフォーマンスをグーグルで検索したり、より広いReactコミュニティで助けを求めたりするなら、そこには多くのリソースがあります。

はい、私はinitialScrollIndexを意味しました。 それが機能するためにはgetItemLayoutを実装する必要があり、それはListHeaderComponentを占めるはずです。

素晴らしい@ sahrens 、 iOS9のような古いハードウェアが怖いです...新しいデバイスでテストしてもパフォーマンスの問題はありません。他の誰かが同じハードウェアの問題を経験しているかどうか知りたいと思いました...しばらくの間私はコミュニティに私がもっと深い何かに到達するかどうか見るように頼むでしょう、thks !!!

こんにちは私のものはフラットリストにstyle={{ backgroundColor: 'white' }}を与えることで修正されました

では、 @ hramosと@ sahrens 、 0.44.0使用してreact-native-tab-vew 、そして本当にコアチームは、この時点で推奨しているものをクリアしていません。

@sjmuellerは@sahrensがこれがすでにマスターで修正されていると言っていません

@hramosこのスレッド全体をもう一度確認しました。 私はそれを見逃したかもしれませんが、@ sahrensがFlatListが非表示になることがマスターで修正されていると言及しているところはどこにも

@yaronleviがreact-native-tab-viewまたはTabNavigatorにlazy={true}を設定することを推奨していることはわかりますが、それはiPhone 7plusでも急激な遅延を引き起こします。

@knappdevは、 lazyなくても機能すると言っているので、0.44.0からアップグレードして、成功するかどうかを確認します。

私の回避策は、フラットリストが使用されているかどうかに応じて、removeClippedSubviewsをオン/オフにすることです。

  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}
      />
    )
  }

FlatListのremoveClippedSubviewsがデフォルトでオフになりました。

遅いデバイスの問題については、RNTesterアプリFlatListExampleを試しましたか？

FlatListExampleはどのように機能しますか？

FlatListのremoveClippedSubviewsがデフォルトでオフになりました。

ええ-だから私は実際にスクロールするときにそれをオンにします。 そうすれば、ランダムなジッターが少なくなります。

次に、FlatList自体よりもさらに耳に聞こえるメモリを減らすために、（はるかに）見えないセルを空のセルに置き換えます。

それで、最後に、それがそれほどハードなパフォーマンスを犠牲にしても、 removeClippedSubviews={false}を使用する代わりにそれを修正する方法はまだありませんか？

私の修正は、iOSシミュレーターのjsのデバッグをリモートで無効にすることでした

lazy: true設定は私にとってはうまくいったようです。 まだパフォーマンスをテストしていません。

私はこの問題をremoveClippedSubViews={false}

最高の仕事
すべてのハードウェア/シミュレーターで動作します。 removeClippedSubViews={false}はiPhone7で常に機能するとは限りません。

リストビューで強制的に移動してください。

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

参照例。

 <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}/>

問題は、すでにマウントされている可能性があることです

2017年8月24日には、午前3時44分pmに、ピーターSuwaraの[email protected]は書きました：

回避策
すべてのハードウェア/シミュレーターで動作します。

'' 'componentDidMount（）{
requestAnimationFrame（（）=> {
//データをリロードするためのハック
this.refs._list.scrollTo（{x：1、y：0、animated：false}）
}）;
} '' '

'' '
ref = "_ list"
dataSource = {this.state.dataSource}
renderRow = {（data、sectionId、rowId）=>}
renderSeparator = {（sectionId、rowId）=>}
removeClippedSubViews = {false}
initialListSize = {SortedBrandList.count}
/> '' '

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

私はこの問題を、少なくともシミュレーターで、次の方法で解決しました。

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

ここでの私の推測では、ListViewが現在画面に表示されていない場合、clippedSubviewsを管理するルーチンは境界を適切にチェックしていません。 これは、画面外にレンダリングしてから画面上に移動するListViewコンポーネントでよく発生します。 これは、修正するのにそれほど難しいバグではないはずです。

この関数が問題であると確信しています： https ：

私の推測では、それが測定している座標空間はどこかで間違っています。 今それを見てください。

これは修正かもしれませんか？ https://github.com/facebook/react-native/pull/15669/files

まだこれに対する修正はありませんか？

@petersuwara ：あなたが提案した作品。 ありがとうございました。 @MattFoley ：修正はいつダウンロードできるようになりますか？

FlatListだけでなく、ListViewにロードする際にも問題があるようです。
データソースの設定にわずかな遅延を使用することで回避策を見つけました。

componentWillMountメソッドでリモートソースからデータをロードすると、次のコードが実行されます。
動作するようです：

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

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

        })
}

そして、わずかな遅延の間、いつでもロード画面を表示できます。 とても短いので見えません。

@nathvarunのメソッドが

これは、react-navigationのタブに割り当てられているが、現在選択されている画面など、すでにマウントされているコンポーネントで発生します。そのため、componentWillMountを修正してこれを修正する方法がわかりません。

上記の私のPRは問題を解決したようですが、それをマージすることができませんでした。他の誰かがそのPRにチャイムを入れたいですか？

@MattFoleyマージするかどうか。 私は今あなたのコードを使用しています。 そしてそれは本当に私の問題を修正します。

react-navigationのTabNavigatorをreact-navigation lazy: trueもできます...しかし、これがreact-nativeによって修正されるのを見るのは素晴らしいことです。

SectionListまたはFlatlistを使用している場合は、ref = {（ref）=> this.sectionList = ref}を使用してください。
そしてあなたのコードではthis.sectionList.recordInteraction（）-あなたのビューをレンダリングする必要があります

@MattFoleyの提案された修正はマージされ、0.50リリースの一部になりました： https ：

更新したばかりですが、 <ListView />この問題が引き続き発生しています。 私は何か間違ったことをしていますか？ これが私の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"
  },

ListViewは今では非推奨になっていると思います。 FlatListを試してみて、どうなるか見てみましょう。

0.50.3でもまだこれが見られていると思います。 他の誰かが確認できますか？

FlatListに切り替えることで、この問題を修正しました。
8:39コリン・ラムゼイで金、2017年11月17日には[email protected]
書きました：

0.50.3でもまだこれが見られていると思います。 他の誰かが確認できますか？

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
。

ああ、私たちはすでにFlatListを_使用しています_。

これは0.50.3でもまだ問題です。 removeClippedSubviewsは効果がないようです。 これを再開できますか？

0.50.3でもまだ問題があります。 これをもう一度開いてください。

再度ご迷惑をおかけして申し訳ありませんが、再開してもよろしいですか？ これは差し迫った問題です。

最新のExpoReact NativeSDKを使用してこれに遭遇しました。 これは、TabNavigatorの3番目のListViewでのみ発生します。 2番目と3番目を入れ替えると、新しい3番目のページが影響を受けます。 私の場合、removeClippedSubviewsはそれを修正しました。

requestAnimationFrame(() => { this.listview.scrollTo({y: 1}); });は私のために働いた。

this.listView.scrollToEnd()しても機能しなかったため、リストの最後の座標を手動で計算して、 scrollTo()渡す必要がありました。

フラットリストの場合、これは同じ配列を更新することによって発生する可能性があります。 FlatListは、データが異なるかどうかをチェックします。 したがって、不変の配列を利用してください

removeClippedSubviews = {false}は、私の場合のバグを修正します。

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

@edmengelは正しいです。 私はプロジェクトに取り組んでいて、まったく同じバグがありました。

スクロールする前に：

スクロール後：

React-native-router-flux@^4.0.0-beta.27はナビゲーションに使用され、App.jsはこれを返します。 私の検索ページにはリストビューが含まれていて、このバグがありました。 3番目のタブにあります。

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

検索ページ（リストビューを含む）を3番目のタブから2番目のタブに変更すると、リストビューは正常に機能しました。

このための実用的なハックを見つけました。

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

<Flatlist style={{ flex: 1 }}/>
このトリックは私のために働きます。

ScrollViewとListView両方で、 0.55.4で同じ問題が発生します。 removeClippedSubviews={false}追加すると機能します。

残念ながら、私たちの場合、Androidで画像の欠落を回避する必要があるため、これはオプションではありませんhttps://github.com/facebook/react-native/issues/13600#issuecomment -315629140

レンダリングで前後にスクロールするのはナビゲーションの後であるため、最初は空白の画面に移行しているように見えます。

ビューを変更しても効果はありませんでした。

他に何か提案はありますか？

私はそれが特定のスクロール位置の後にのみ起こることを発見しました...
https://streamable.com/l5arv

chrome-devtoolsを使用してビューを検査すると、すべてのサブビューがクリップされていることがわかります。

まだスタックしています。 @ hramosを再度開いてください。

このような単純な関数でまだ問題がありますか？ これが、ReactNativeからストレートネイティブコードに戻った理由です。

簡単な場合は、手を貸して修正してください@petersuwara

この問題はしばらくの間クローズされています。 これがあなたに影響を及ぼしている場合は、_新しい問題を開いて_、可能な限り詳細を提供してください。 ここで報告された元の問題が修正されたため、この問題をロックしています。後でコメントした各人がまったく同じ問題に直面していることは明らかではありません。

FacebookではFlatList _広範囲に_使用しており、この種の苦情は社内で表面化していない。 このタイプの問題は、たとえば特定のナビゲーションライブラリで発生する可能性があります。 問題に関する詳細情報と、再現する手順の明確なリスト、または理想的には小さなプロジェクトで新しい問題を開くことは、非常に役立ちます。