+1
Menghadapi masalah yang sama persis. Bekerja dengan 0,5 tetapi putus dengan 0,6.

Ini harus diperbaiki dalam 0,7

Saya mengalami masalah yang sama persis.

cloneWithRows berfungsi dengan baik. tetapi cloneWithRowsandSections tidak.

Apakah Anda melihat cloneWithRowsandSections tidak bekerja dengan 0.7?

Juga, Anda mungkin ingin mencoba mengatur initialListSize ke angka yang lebih besar - yang mungkin membantu sebagai solusi jika ada yang tidak diperbaiki di 0,7 untuk Anda.

initialListSize yang lebih besar tidak membantu dan 0,7 saya belum mencoba karena ketergantungan vendor. Karena mungkin, saya memberi tahu Anda tentang 0,7 jika seseorang tidak akan lebih cepat :)

Memiliki masalah yang sama dengan cloneWithRows di versi 0.6, bekerja di 0.5.

Belum dicoba di 0.7. Akan mencobanya. Saya tahu bahwa saya juga telah mencoba mengatur initialListSize ke angka yang lebih tinggi sebelumnya dan tidak membantu.

bekerja di 0,7

Juga tidak berfungsi di 0.7.1

Memiliki masalah yang sama dengan cloneWithRows di versi 0.7.1

Bagi saya ini bekerja dengan baik di 0.7.1.

Tidak bekerja di 0.8.0.

Masih menggunakan cloneWithRows bukan cloneWithRowsAndSections

cloneWithRows bekerja untuk Anda yamill? Tidak untuk saya di 0.8.0.

@coderdave sebenarnya cloneWithRows juga tidak berfungsi untuk saya. kesalahanku.

@sahrens @ide @michalraska prop scrollY saya tidak diperbarui. Saya pada dasarnya mencoba meneruskan offset gulir ke komponen saya, seperti:

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

Tetapi memperbaiki baris ini memungkinkan saya untuk menerima prop scrollY ke komponen saya dengan sukses. Saya ingin tahu apakah perubahan ini memperbaiki semua masalah lainnya?

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

Saya mengubahnya dari:

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

ke

var shouldUpdateRow = true;

Saya perhatikan ini di 0.11.0-rc juga.

Berikut adalah dua contoh yang dapat mereproduksi masalah.

Baris: https://rnplay.org/apps/d3DM6A
Baris + Bagian: https://rnplay.org/apps/xnyaYw

Solusi sementara yang saya buat adalah menggulir ListView 1pt saat dipasang.

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

Anda dapat menghapus komentar pada bagian ini di dalam contoh di rnplay.org untuk pengujian.

Pertanyaan bodoh. Mungkinkah ini ada hubungannya dengan penggunaan NavigatorIOS? Saya memiliki beberapa masalah dengan rendering, padding, dll semua ketika tampilan daftar dirender sebagai anak dari NavigatorIOS.

@jaygarcia Saya rasa tidak karena contohnya tidak menggunakan NavigatorIOS. Juga, dalam proyek saya sendiri, saya menggunakan Navigator alih-alih NavigatorIOS.

+1 untuk saya, saat ini saya menghadapi perilaku ini saat menggunakan Navigator. Saya menggunakan 0.11 dan saya menggunakan cloneWithRows.

Sebagai solusinya, saya harus menggunakan solusi @christopherdro , tetapi saya perlu menggulirnya cukup banyak untuk membuat item saya dirender (besar).

Menariknya, solusinya terkait dengan solusi untuk bug ini: https://github.com/facebook/react-native/issues/1878 jadi kode terakhir saya adalah:

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

ok, menggunakan kode yang disebutkan di atas, saya mendapatkan beberapa bug aneh di ScrollViews bersarang: Setelah pemasangan, peristiwa onScroll dipicu yang memposisikan ulang offset gulir awal saya pada tampilan tersebut.

Masih bug di 0.12.0. Berikut hierarki tampilan:

Masalah yang sama seperti @Sidnicious pada 0.11.0. Aplikasi saya mengalami masalah ini sejak versi awal react-native. Semuanya berfungsi seperti yang diharapkan jika saya memindahkan ListView dari hierarki Navigator .

Saya mengalami masalah yang sama menggunakan 0.13.0-rc

Saya memiliki masalah ini di 0.13.1 hanya dengan ini:

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

Bagi saya masalah ini baru saja muncul ketika memutakhirkan dari 0.14.2 ke 0.16.0-rc . Perbaikan yang berhasil bagi saya adalah menyetel prop pageSize pada ListView ke 3. 2 tidak berfungsi untuk saya, tetapi 3 bekerja dengan sangat baik.

_(ツ)_/¯

masalah yang sama di sini dengan 0.15.0 , mencoba semua trik, tidak berhasil. ios 9.1 iphone 6

@nicklockwood - dapatkah Anda membantu di sini? Sepertinya masih ada beberapa bug.

0.14, masalah yang sama

Menautkan masalah LisView serupa: https://github.com/facebook/react-native/issues/4728

Menautkan masalah serupa lainnya: https://github.com/facebook/react-native/issues/4179

Saya melihat ini di 0.16.0. Adakah yang menempatkan ini di radar di Product Pains? Yang satu ini menjadi sangat menyakitkan. :/

Saya telah memposting ini di Product Pains . Jika itu masih memengaruhi Anda, silakan pilih di sana.

0.16, masalah yang sama

Masalah masih berlanjut di 0.17 menggunakan cloneWithRows pada dataSource. Daftar hanya merender item saat sedang digulir.

Saya melihat masalah yang sama pada 0.17 tetapi menonaktifkan removeClippedSubviews tampaknya telah memperbaikinya.

+1
Saya melihat masalah yang sama pada 0.17 tetapi menonaktifkan removeClippedSubviews tampaknya telah memperbaikinya.

Bagi saya itu masih terjadi di 0.17 dengan atau tanpa removeClippedSubviews . Apa yang saya perhatikan adalah bahwa masalah saya mungkin terkait dengan contentOffset yang disetel secara manual dan initialListSize . Jika offset melebihi tinggi elemen yang akan dirender untuk initialListSize , itu tidak akan merender elemen yang diperlukan sampai pengguna menggulir.

Tampaknya juga ada masalah dengan daftar yang memiliki flexDirection: 'row' disetel. Ketika saya menghapus properti ini semua item dirender. Jika disetel, Daftar awalnya hanya membuat dua item.

Untuk masalah removeClippedSubviews saat menggunakan Navigator.
Anda mungkin ingin memeriksa https://github.com/machard/react-native-advanced-navigation di mana masalah tidak terjadi (mungkin karena render tertunda setelah tampilan benar-benar ada di layar)

Ada juga masalah dengan flexDirection: 'row' dan flexWrap: 'wrap' disetel di properti contentContainerStyle . Solusi yang berhasil bagi saya adalah mengatur pageSize .

versi asli reaksi: 0.19.0

terima kasih @jittuu mengatur prop

mengatur pageSize menjadi apa?

@gre itu tergantung pada tata letak Anda. Jika tampilan Anda diatur ke dalam baris, ukuran halaman harus kelipatan dari item per baris. Anda dapat bereksperimen dengan nilai yang tepat, untuk melihat pengaruhnya terhadap kinerja.

Anda juga harus mengatur initialListSize cukup besar untuk mengisi seluruh layar.

Anda mungkin menemukan penjelasan dalam komit ini berguna: https://github.com/facebook/react-native/commit/e7005f7f5429422b6f2e9c2aa29c9d57bda7b77a

@jittuu Ini bekerja untuk saya; Saya juga mengalami bug saat menggunakan flexWrap .

terima kasih @jittuu mengatur

masih mendapatkan masalah saat melakukan gulir pada tampilan daftar, menavigasi aplikasi dan kembali.
pageSize tidak membantu (saya sudah mencoba nilai yang berbeda dari 1 hingga 60).

@gre apakah Anda mengatur initialListSize cukup besar? Apakah ada repo yang bisa kita lihat?

@jaygarcia @nicklockwood Saya punya demo untuk mereproduksi bug ini, repo url: ListNotRender

melangkah:

1. buka aplikasi.
2. klik item tabbar "#1".
3. item daftar tidak dirender hingga gulir apa pun ..

Saya yakin bug ini relatif terhadap prop removeClippedSubviews dari ListView, dan bug hanya terjadi ketika disetel true.

Ini masih terjadi pada kami di RN 0.26.0. Situasi yang sama di sini:

• removeClippedSubviews={true}
• ListView ditampilkan di luar layar
• saat membuka layar itu, tampilan daftar diselipkan hingga pengguna berinteraksi dengannya

cc @javache

Saya percaya ini diperbaiki oleh https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e

@javache Saya secara manual menambahkan baris itu secara lokal dan itu tidak memperbaiki masalah.

Saya juga menerapkan yang ini di atasnya https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 tetapi tidak berhasil juga. ;)

single https://github.com/facebook/react-native/commit/1fcd73f3841d5afbabfa3adecfb7d4036d91a60e komit di atas RN 0.28 masih membuat bug untuk saya juga.

Menyelidiki sedikit tentang ini, saya bertanya-tanya apakah ListView masih memperbarui di latar belakang (misalnya selama pembaruan gulir) bahkan ketika itu tidak lagi terlihat?

Karena sebenarnya bug tersebut mudah direproduksi oleh saya jika saya menggulir pada tampilan, melakukan navigasi ketika masih menggulir dengan 'gravitasi' , tunggu sebentar dan klik kembali. Layar penuh akan menjadi putih sampai saya menggulir lagi.
Tapi itu pada dasarnya satu-satunya skenario ketika bug ini terjadi pada saya. Apakah ini ~ skenario repro yang sama untuk semua orang, atau apakah bug lebih luas dari ini?

Skenario itu tidak jauh dari @janmonschke https://github.com/facebook/react-native/issues/1831#issuecomment -22799032 .

Sulit untuk mengetahui alasan bug ini, tetapi inilah 2 sen saya:

Kedengarannya baris dirender _white_ selama latar belakang. Saat membuat tampilan gulir terlihat lagi _(misalnya kembali)_, mereka masih putih, dan mereka tidak diperbarui _(karena mereka tidak memiliki alasan untuk diperbarui, mereka di-cache)_ sampai gulir baru terjadi.

Apakah akan memperbaiki bug jika ScrollView akan merender anak-anaknya ( updateClippedSubviews ?) hanya jika masih terlihat? (jika baris tidak dirender selama latar belakang, mereka tidak akan pernah ditampilkan putih lagi)

@javache 1fcd73f dapat memperbaiki kasus ListView dengan satu atau dua baris yang tidak terisi full scree. dalam hal ini bahkan gulir ListView tidak dapat menampilkan ulang baris daftar.

Saya menemukan cara sederhana untuk mereproduksi bug:

1. Tampilkan ListView dengan removeClippedSubViews = true;
2. Sentuh satu baris masuk ke halaman berikutnya;
3. Putar orientasi layar 90;
4. Putar layar kembali;
5. Kembali ke layar ListView;

ListView akan kosong, dengan baris lebih dari satu layar, gulir ListView akan ditampilkan ulang, dengan baris kurang dari layar, bahkan gulir ListView tidak dapat menampilkan ulang apa pun. dengan gulir 1fcd73f ListView dapat ditampilkan ulang :)

1. Masih melihat masalah ini pada 0.26.3
2. Pada proyek non RN saya, saya melihat masalah di Android asli.

Solusi yang kami pilih adalah melakukan pergeseran scrollTo 1px ke depan dan belakang pada Refresh. Ini adalah solusi tetapi telah berhasil dalam kedua kasus.

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

@JBerendes ya, peretasan ini berhasil.

berikut adalah solusi yang lebih canggih yang tidak merusak gulir pengguna:

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

}

untuk dimasukkan ke dalam abstraksi ListView Anda. Maka Anda perlu menelepon scrollHackToWorkaroundWhiteBug pada waktu yang ditentukan. Bagi saya itu setiap kali saya mengganti layar (sebelum dan sesudah transisi).

Saya pikir ini terkait dengan scrollRenderAheadDistance ListView (karena membuat baris yang tidak dirender setelah disentuh) dan saya telah berhasil memperbaikinya dengan mengatur scrollRenderAheadDistance ke nilai yang lebih besar dari 1800. Pasti ada korelasi antara scrollRenderAheadDistance dan jumlah baris yang dirender tetapi tidak konsisten. Saya telah menemukan bahwa itu biasanya dirender sebagai berikut (walaupun terkadang itu akan membuat semua baris):

| scrollRenderAheadDistance | Jumlah baris yang dirender |
| --- | --- |
| 1000 | 2 |
| 1200 | 2-5 |
| 1400 | 5 |
| 1600 | 6 |
| 1800 | 7+ |

Saya sedang merender ListView dengan baris setinggi 80pt. Saya telah mendapatkan rumus yang akan membantu Anda menetapkan scrollRenderAheadDistance untuk ListView Anda:

scrollRenderAheadDistance = 680 + (ROW_HEIGHT_IN_PIXELS * INITIAL_PAGE_SIZE_IN_PIXELS)

Namun, saya tidak mengerti pentingnya 680 (atau 340 * 2 ).

EDIT: Solusi ini berfungsi di Debug tetapi tidak pada skema Rilis (untuk iOS) ...

Oke, menyetel removeClippedSubviews ke false memecahkan masalah bagi saya.

Saya tidak menemukan ini sampai memutakhirkan dari 0,26 ke 0,29, jadi sesuatu diperkenalkan di 0,27, 0,28, atau 0,29 (saya belum menguji terhadap 0,27 atau 0,28 tetapi saya bisa jika itu akan membantu).

@gnestor Rusak di 0,29, periksa #8607 dan https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7

@gnestor @nihgwu Saya cukup yakin bug tersebut bukan regresi baru-baru ini. Masalah ini telah dibuat satu tahun yang lalu, dan saya sendiri telah mengalaminya sejak RN 0.13 dan selalu menggunakan solusi untuk "bertahan" dengan ListView. tidak menggunakan removeClippedSubviews membuat daftar besar menjadi lambat.
Mungkin ada upaya untuk memperbaikinya atau setidaknya untuk mengurangi kasus di mana bug muncul, tetapi ini masih terjadi kira-kira seperti yang dilaporkan dalam pesan masalah awal ini.

@gre tapi saya masih berpikir #8607 diperkenalkan di 0,29, itu benar-benar merepotkan untuk melihat tampilan kosong, saya baru saja mengembalikan perubahan https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7 dan semuanya berfungsi dengan baik sebelumnya tanpa mematikan removeClippedSubviews

Setel initialListSize ke nilai yang tepat dan setel removeClippedSubviews ke false, selesaikan masalah saya

Mendapat masalah ini setelah memutakhirkan dari 0,28 ke 0,29.
removeClippedSubviews={false} memecahkan masalah.
Juga, dalam kasus saya, saya memperbarui ListView height pada componentDidUpdate() .
Membungkus kode pemutakhiran ketinggian dalam componentDidUpdate() dengan setTimeout dengan batas waktu khusus juga membantu.

Saya juga mengalami ini tetapi itu ada di satu ListView yang diisi dengan data lokal. Saya juga hanya melihat ini di iOS dan setelah saya memutakhirkan ke 0.29. ListView yang dimaksud menggunakan this.state.dataSource.cloneWithRowsAndSections dan componentDidMount adalah ketika saya memuatnya.

Dan removeClippedSubviews={false} membahas ini.

Menyetel removeClippedSubviews pada komponen ListView saya juga berfungsi untuk saya. Saya hanya mengalami masalah ini dengan skema Release pada 0.29 saat menggunakan komponen Navigator default.

Saya memiliki masalah yang sama, saya telah mengatur flexDirection: 'row' dan flexWrap: 'wrap', saya menggunakan RN 0.29.2. Pada tampilan daftar lain (di mana saya belum mengatur flexDirection: 'row') saya tidak memiliki masalah itu.

Perbaikan cepat seperti yang dikatakan poster lain adalah mengatur initialListSize dan pageSize yang tepat, tetapi saya yakin itu akan membuat aplikasi kurang responsif, misalnya jika Anda memiliki beberapa filter yang hanya akan menampilkan bagian dari daftar item yang Anda miliki di dalam tampilan daftar , mengetuk di antara filter akan lambat karena tampilan daftar mencoba merender ulang seluruh area yang terlihat.

Pada tampilan daftar lain, saya telah menyelesaikan ini dengan mengatur initialListSize=0 pageSize=1. Tapi saya tidak bisa di tampilan daftar kisi (flexDirection: 'row' dan flexWrap: 'wrap').

Saya memukul ini di RN v0.31.0-rc.0.

Menambahkan removeClippedSubviews={false} tampaknya telah memperbaiki masalah.

"removeClippedSubviews={false}" tampaknya bukan solusi yang baik, itu akan membuat semua baris dan memiliki masalah pengelolaan memori. Apakah seseorang memiliki solusi yang lebih baik kecuali "listView. scrollTo" dan "removeClippedSubviews" ?

Masalah ini jauh lebih buruk pada ios 10 beta dengan RN 0.31 :-(

removeClippedSubviews tidak membantu saya di Android, harus pindah dari ListView ke ScrollView sebagai gantinya.

Sebuah bug yang sangat besar. Saya bertemu juga.

Pastikan semua orang mendukungnya di Product Pains. Sudah cukup tinggi, tetapi belum cukup tinggi untuk mendarat di kotak masuk seseorang :-( Ini tautannya

Pada titik ini saya akan mengatakan ini mungkin masalah yang sama dengan #8607. Lihat untuk rencana saya bagaimana mengatasinya.

Tetap eksis di 0.33.0

Masih ada di 0.32

Saya bertemu bug ini kemarin, dan pengaturan removeClippedSubviews = {false} berhasil.

+1 pada 0,33

Yee, saya untuk, masalah yang sama! +1
0,33,
Sunting:
removeClippedSubviews = {false}, memperbaiki masalah untuk saya juga.

+1

Bisakah Anda mencoba tambalan ini https://Gist.github.com/majak/b0ee1fb6ca725d2cf810d2f0ab394f2e (dari #8607) dan beri tahu saya apakah itu membantu masalah ini?

@majak Terima kasih telah membagikan tambalan ini. Kami hanya menerapkannya, sekarang masalah ini hilang (RN 0.34).

@majak ini sepertinya memperbaikinya untuk saya juga, kerja bagus!

ini terjadi pada RN34, ketika removeClippedSubviews={true}

Punya masalah ini di React Native 0.34.
Masalahnya hanya terjadi ketika saya memiliki:

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

pada gaya tampilan daftar.

initialListSize={100}
memperbaikinya untuk saya

@majak apakah Anda berencana membuat PR dengan tambalan itu?

@janmonschke ya! Ikuti masalah tertaut untuk pembaruan.

Punya masalah ini di React Native 0.36

Saya dapat mengkonfirmasi ini terjadi pada 0,36

Ini berfungsi sempurna di emulator, hanya dalam mode debug, tetapi tidak pernah di perangkat. Daftar tidak pernah berfungsi pada perangkat, mencoba semua yang direkomendasikan dari atas, bahkan mengganti ListView dengan ScrollView , yang saya lihat di perangkat Android saya hanyalah navigator. (Bahkan mencoba meletakkan daftar di luar navigator)
0.37

Saya masih dapat menemukan masalah pada 0,36 tetapi terima kasih atas penyelesaiannya!

Saya masih melihatnya di 0.36.1

Saya masih melihatnya di 0.36.1

ada di 0.31
initialListSize={1} selesaikan untuk saya

Punya masalah ini di React Native 0.38

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

ini memperbaiki masalah di versi 0.38, saya tidak tahu apakah itu berfungsi di versi sebelumnya juga.
ini arsipkan masalahnya di versi 0.38, saya tidak tahu apakah berfungsi pada versi awal

Masalah ini ada pada 0.36.
Tidak dapat membuatnya bekerja dengan removeClippedSubviews = {false} dan initialListSize={8}

lebih dari 1 tahun berlalu, masalah ini masih terbuka??

masih ada di 0.39. set removeClippedSubviews = {false} berfungsi.

"removeClippedSubviews={false}" tampaknya bukan solusi yang baik, saya punya solusi baru dan itu berfungsi untuk saya. Paltform iOS. File RCTView.m

haruskah saya membuat PR?

Adakah yang menguji pada RN0.40, saya tidak mengalami masalah ini lagi setelah ditingkatkan ke RN0.40

Masalah ini ada.
1, Tampilkan ListView dengan removeClippedSubViews = true;
2, Sentuh satu baris masuk ke halaman berikutnya;
3, Putar orientasi layar 90;
4, Kembali ke layar ListView;

ListView akan kosong, dengan baris lebih dari satu layar, gulir ListView akan ditampilkan kembali

@endpress Saya sudah mengikuti langkah Anda, masih tidak bisa mereproduksinya, dalam menggunakan RN0.41RC0

Punya masalah ini di 0.38.

Solusi saya adalah mengubah paddingTop ListView antara 0 dan 1, sehingga ListView akan disegarkan setiap saat.

Anda dapat mencoba mengubah backgroundColor, border, dll. Beri tahu saya jika properti lain berfungsi.

@nihgwu masih ada di 0.40.0

Ini adalah masalah

@endpress perubahan (https://github.com/facebook/react-native/issues/1831#issuecomment-270552011) berfungsi untuk kasus saya, dan mungkin membantu facebook/react-native#8607 juga.
saya tahu patch mungkin masih jauh dari sempurna, tapi saya tetap menyarankan Anda untuk membuat PR.

bagi saya bahkan mengatur initialListSize={0} memperbaikinya rn 0.40.0

@majak Apakah ada kabar baik untuk masalah fatal ini?

Bagaimana dengan https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32 ?

FlatList masih eksperimental, jadi tidak ada jaminan memiliki lebih sedikit bug atau perubahan dengan cara yang tidak kompatibel, tetapi Anda dapat mencobanya dengan risiko Anda sendiri.

@sahrens @gre Apakah mungkin untuk membangun lapisan abstrak di atas FlatList yang menyediakan API yang sama dengan ListView lama sehingga kode aplikasi lama kita dapat tetap sama.

@sahrens FlatList diimplementasikan dengan UITableView?

Setelah FlatList distabilkan dan tidak lagi eksperimental, kami mungkin membuat adaptor dengan API yang identik sebagai ListView, atau mungkin kami akan menukar implementasi ListView di bawah tenda.

Itu tidak menggunakan UITableView. Itu sebenarnya tidak menggunakan kode asli baru sama sekali, itu semua hanya JS dengan primitif asli/kerangka kerja kami yang ada - Anda dapat melihat implementasinya di sini: https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32

@sahrens terima kasih, cukup keren dan bermanfaat.

@savanthongvanh menyetel ukuran awal ke 0 memiliki efek merender semua item di ListView pada pemuatan awal. Hati-hati dengan ini jika Anda memiliki banyak item.

Juga berurusan dengan rn 0.41.2 ini. Apakah seseorang memiliki implementasi FlatLIst sederhana yang dapat saya salin, sangat mengharapkan solusi segera.
Terima kasih,
ron

FlatList (andVirtualizedList) ada di master jika Anda ingin bermain dengannya.

Berikut cara sederhana untuk memulai sekarang dengan FlatList untuk siapa pun yang berurusan dengan ini: https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b#.xnp03gd2u

Setel initialListSize ke nilai yang tepat dan setel removeClippedSubviews ke false, selesaikan masalah saya

Terima kasih @hoperce , dengan removeClippedSubviews berfungsi untuk saya, initialListSize menyebabkan gulir berombak

Saya memiliki RN .42 dan saya tidak melihat lib eksperimental di sini untuk FlatList, jadi saya terjebak sampai saya dapat memutakhirkan (tidak sebentar) dengan masalah ini.

Anda selalu dapat menyalin kode FlatList ke aplikasi Anda, bahkan jika Anda tidak menggunakan RN versi terbaru.

Saya masih dapat mereproduksi bug "tampilan penuh menjadi putih saat kembali" dengan FlatList. Saya ingin tahu apakah itu tidak lebih terkait dengan ScrollView.

Masalah dengan menjadi putih sebentar benar-benar berbeda dan unik untuk FlatList. Kami sedang berupaya menguranginya, tetapi ini adalah konsekuensi rumit dari rendering berjendela asinkron. Bug yang dirujuk masalah ini adalah di mana tidak ada konten yang terlihat pada render awal hingga pengguna menggulir, yang saya harap diperbaiki dengan FlatList.

Saya juga mengalami masalah ini dengan ListView (dan FlatList juga).

Saya baru saja menemukan bahwa saya bisa mendapatkan daftar untuk dirender dengan benar dengan mengatur ulang sumber data saya ke [] di konstruktor tampilan dan kemudian mengatur ulang ke daftar item di setTimeout()

FYI Tampilan daftar saya disematkan di ReactNavigation StackNavigator di TabNavigator.

juga, peretasan untuk memicu gulir 1px secara terprogram masih berfungsi baik untuk ListView/FlatList. tetapi Anda harus memanggilnya pada siklus hidup yang tepat (biasanya ketika Anda kembali ke layar).

@gre : apakah Anda memiliki aplikasi repro untuk masalah dengan FlatList? Saya ingin memperbaikinya secepatnya!

@gre , apakah Anda punya contoh kode untuk itu? Dan maksud Anda di componentWillMount untuk komponen yang mencakup ListView?

@ericvicenti - sepertinya dibutuhkan beberapa kode lain dari RN. Saya khawatir itu akan meminjam potongan-potongan dari tempat lain. Saya mungkin menariknya keluar. Mungkin membuangnya ke dalam repo untuk digunakan orang lain -- apakah itu diperbolehkan?

@sahrens maaf itu ada di aplikasi perusahaan saya, tapi mungkin saya bisa mencoba membuat contoh kosong untuk menirunya!

@natdm sedikit di atas dalam komentar: https://github.com/facebook/react-native/issues/1831#issuecomment -231069668 - ini adalah ide dasar, saya kurang lebih menyimpang dari ini dengan sistem yang akan bergantian antara -1px dan 1px sehingga tidak mengakumulasi gulungan secara visual dari waktu ke waktu XD peretasan besar

Saya mengalami masalah dengan SectionList - kosong pada render awal sampai saya menggulir. @sahrens apakah ada perbaikan yang terlihat?

@smkhalsa apakah Anda memiliki repro yang jelas? Apakah pengaturan removeClippedSubviews={false}

@sahrens Sepertinya pengaturan removeClippedSubviews={false} memperbaiki ini untuk saya. Tanpa ini, saya mendapatkan layar kosong setiap kali saya menavigasi ke tampilan khusus ini.

Saya akan mencoba mengisolasi masalah dalam repo baru dan mempostingnya jika saya bisa.

sama untuk saya (removeClippedSubviews jelas merupakan pemicu bug). kami baru saja melakukan repro mudah di aplikasi kami yang memiliki daftar di dalam react-native-tab-view . Namun saya tidak tahu apakah contoh yang lebih sederhana akan mengulanginya.

lihat 2 paragraf terakhir dari jawaban saya di sini https://github.com/facebook/react-native/issues/1831#issuecomment -228775913

Saya pikir itu mungkin sekitar itu (hanya hipotesis):

(1) daftar dirender di tab latar belakang, karena mereka 'di luar kotak pembatas' removeClippedSubviews akan menganggap mereka tidak ada di sini dan tidak akan membuat apa pun (putih)
(2) ketika tab menjadi fokus, dan karena tab itu mungkin menggunakan sesuatu seperti <StaticContainer> , tidak ada yang 'disegarkan', itu masih putih
(3) segera setelah pengguna 'menggulir', Anda menyegarkan logika removeClippedSubviews yang sekarang menentukan sel daftar terlihat dan menyegarkannya.

Terima kasih atas petunjuknya @gre

masih ada di RN 0.41.2, android ok, hanya ios10, set removeClippedSubviews={false} dapat menyelesaikan masalah ini. ListView saya kecil, jadi bukan masalah besar. ListView di dalam stackNavigator dari tabNavigator(react-navigation).

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

Masalah yang sama di sini. Tidak ada lagi yang perlu ditambahkan, selain removeClippedSubviews={false} yang menyelesaikannya untuk saya juga.

@agentilela Terima kasih atas perbaikannya, masalah yang sama di sini

Menyetel removeClippedSubviews={false} memperbaikinya

masalah ini ada di react-native-maps MapView yang AFAIK tidak gunakan ScrollView dan tidak ada hubungannya dengan ListView .

Masalahnya masih terjadi di RN44, initialListSize={200} memang menyelesaikan masalah, tetapi saya tidak berpikir itu adalah solusi jangka panjang yang baik karena perlu beberapa waktu untuk merender sebelum menampilkannya. Terlihat jelas dalam tampilan daftar yang lebih dari 100 baris.

ps removeClippedSubViews={false} tidak menyelesaikan masalah saya

removeClippedSubViews={false} bekerja untuk saya untuk ListView .
Juga, FlatList memiliki masalah yang sama.

Saya memiliki masalah yang sama dengan ListView/FlatList dan navigasi reaksi.
Saya telah memperbaikinya dengan lazy: true di opsi TabNavigator dan removeClippedSubViews={false} di ListView

Saya juga dapat mengonfirmasi bahwa bug terjadi di RN 0.44.0:

Terjadi saat menggunakan navigasi reaksi + TabNavigator + (ListView atau FlatList).
Saat Anda membuka tab, itu terlihat kosong. Hanya ketika Anda menggulir sedikit, daftar ditampilkan.

Satu-satunya tab di mana itu tidak terjadi adalah di initialRouteName dari TabNavigator

Seperti yang disebutkan, menyetel lazy: true pada . TabNavigator memecahkan ini.

masalah yang sama di sini, diperbaiki dengan removeClippedSubViews
seperti yang dijelaskan dalam masalah duplikat https://github.com/facebook/react-native/issues/14069
Saya membuat repo untuk mereproduksi masalah https://github.com/jcharlet/react_native_listview_bug jika itu bisa membantu.

Juga masalah ini tidak terjadi saat menggunakan 'react-native-router-flux' alih-alih 'react-navigation' untuk kasus penggunaan yang sama

Beberapa masalah dengan navigasi reaksi di TabNavigator. removeClippedSubViews={false} tidak membantu.

Masalah yang sama bagi saya. Menggunakan navigasi reaksi dengan TabNavigator dan StackNavigator sebagai anak di tab yang dimaksud, dan ListView biasa. RN 0,44 / Expo 17, dan tidak menghapusClippedSubviews atau malas membantu saya :-/

removeClippedSubviews membantu saya memperbaiki versi iOS, tetapi untuk Android saya harus menggunakan initialListSize

Dengan

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

dan lazy: true di TabNavigator 's TabNavigatorConfig semuanya ditampilkan dengan baik:

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 ke
{
"react-asli": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
bekerja untuk saya, lazy=true sepertinya tidak diperlukan untuk StackNavigator

{
"react-asli": "0.44.2",
"react-navigation": "1.0.0-beta.11"
}
malas = benar
removeClippedSubViews={salah}
tidak bekerja

Ini sangat menarik, saya ingin melihat kapan bug 2 tahun ini akhirnya akan ditutup.

Saya memutakhirkan ke react-native 0.44.2, react-navigation 1.0.0-beta.11, dan mengatur "lazy=true" pada TabNavigator yang dimaksud dan itu memperbaikinya. Mungkin hanya menyetel lazy=true akan berhasil, tetapi saya sudah memperbaruinya.

@jhalborg Saya memperbaiki masalah untuk daftar dengan FlatList & removeClippedSubViews={false}.

Saya menggunakan navigasi reaksi dan removeClippedSubViews berfungsi untuk saya dengan struktur ini:

tumpukan modal -> tumpukan tab sekarang -> sertakan banyak tab dengan tumpukan navigasi

Masalah saya adalah kurangnya kinerja jadi saya telah membuat nilai removeClippedSubViews berdasarkan nilai status sehingga saya dapat mengaktifkan/menonaktifkannya tergantung pada apakah layar sedang memuat.

Saya memiliki beberapa daftar yang memuat ulang saat berada di tab lain, jadi saya menggunakan sesuatu seperti berikut:

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

Saya harap ini membantu seseorang karena telah mengganggu saya untuk sementara waktu tetapi akhirnya menjadi solusi yang cukup sederhana.

Sepertinya masalah ini sekarang dapat ditutup, karena alasan berikut:

• Kami merekomendasikan orang menggunakan FlatList/SectionList sekarang, tidak ada peningkatan yang akan datang ke ListView.
• Sepertinya solusi yang masuk akal telah diidentifikasi di utas.

Pikiran?

Bukankah ini bug nyata? Jika ya, mengapa menutup masalah?

Tentang alasan:

• Itu juga terjadi di FlatList, jadi ini bukan hanya masalah ListView.

• Menghapus removeClippedSubViews tampaknya seperti peretasan dengan biaya kinerja, bukan solusi yang masuk akal menurut saya.

Mengonfirmasi bahwa ini masih merupakan bug aktif dalam FlatList/SectionList.

Ada juga beberapa masalah yang berkaitan dengan kinerja FlatList/SectionList yang berarti beberapa orang belum dapat pindah dari ListView, tampaknya aneh sudah tidak digunakan lagi.

Bisakah sesuatu seperti yang saya posting di atas diintegrasikan ke dalam komponen itu sendiri?

Masalah apa yang Anda alami saat bermigrasi dari ListView?

13727

Saya tidak melihat secara spesifik di mana ListView lebih baik. Perhatikan bahwa Anda dapat menambah ukuran jendela atau mematikan virtualisasi jika itu menjadi masalah bagi Anda, karena ListView tidak melakukan semua itu.

Saya akan menunggu mereka untuk menanggapi pertanyaan yang baru saja Anda ajukan sebelum melanjutkannya, tetapi tidak masalah, masalah ini masih terjadi di FlatList dan harus tetap terbuka.

Sekedar pengetahuan masyarakat umum.

Saya menemukan masalah ini dalam skenario saya di mana saya menggunakan Nested ListView yaitu ListView dalam baris ListView. Solusi saya diperbaiki dengan menerapkan removeClippedSubviews={false} ke ListView bersarang.

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

Tidak mungkin memiliki gulir yang mulus dalam daftar besar menggunakan ListView / FlatList / VirtualizedList / WindowedListView (apa pun) di perangkat keras lama seperti iPad 3 / iPad Mini yang menjalankan iOS 9.x.

Catatan: Saya berbicara tentang daftar datar, tidak ada gambar, hanya komponen teks dalam baris.

Seseorang dapat membagikan contoh fungsional dengan kumpulan data 7000 catatan di mana gulirnya mulus dan tidak berombak, saya mencoba semua konfigurasi atribut dan tidak berhasil

Setuju - Saya juga membersihkan sel yang tidak terlihat untuk manajemen memori. Sayang sekali bahwa komponen penting seperti itu di banyak aplikasi sangat kurang dalam kinerja untuk banyak kasus penggunaan. Saya akan menyelam jauh ke dalamnya dalam minggu depan atau lebih untuk melihat apakah ada peningkatan kinerja yang signifikan yang akan dibuat.

Pada 10 Jun 2017, 15:30 +1000, Ariel Falduto [email protected] , menulis:

Tidak mungkin memiliki gulir yang mulus dalam daftar besar menggunakan ListView / FlatList / VirtualizedList / WindowedListView (apa pun) di perangkat keras lama seperti iPad 3 / iPad Mini yang menjalankan iOS 9.x.
Catatan: Saya berbicara tentang daftar datar, tidak ada gambar, hanya komponen teks dalam baris.
Seseorang dapat membagikan contoh fungsional dengan kumpulan data 7000 catatan di mana gulirnya mulus dan tidak berombak, saya mencoba semua konfigurasi atribut dan tidak berhasil
—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

Luar biasa @lprhodes , di sini saya membagikan kasus penggunaan sederhana menggunakan FlatList dengan ~ 200 catatan, contoh ini berombak di iPad 3 dengan iOS 9.

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

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

Terima kasih !!!

Kode contoh Anda memiliki banyak praktik buruk yang dibahas dalam dokumentasi. Misalnya, Anda membuat ulang dan mengikat ulang fungsi secara konstan, yang merupakan pajak pada CPU dan menyebabkan perenderan ulang item daftar Anda yang tidak perlu. Anda harus memastikan komponen ListItem Anda adalah PureComponent, dan pastikan semua props yang diteruskan ke dalamnya tetap dangkal untuk mencegah rendering ulang yang tidak perlu. Ini juga merupakan praktik yang baik untuk aplikasi Anda lainnya.

Itu akan banyak membantu, tetapi saya tidak dapat menjamin kinerja yang sempurna pada perangkat yang lambat. Seberapa jauh lebih baik aplikasi lain seperti browser web bekerja pada perangkat tersebut?

@outaTime Anda juga tidak boleh memanggil loadFeed pada setiap render

@lprhodes metode render hanya mengeksekusi satu, btw saya memperbarui kode menggunakan beberapa praktik terbaik dan masih berombak di iPad 3 dengan iOS 9 (di iPhone 7 semuanya berjalan lancar), saya terus melakukan sesuatu yang salah @sahrens? Terima kasih atas saranmu.

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

Lebih baik, tetapi menyetel debug akan memperlambat banyak hal. Anda juga harus memastikan bahwa Anda menjalankan build produksi yang dioptimalkan, bukan build dev/debug, saat mengevaluasi performa. Terakhir, Anda masih membuat objek gaya baru setiap render, dan Anda dapat menggunakan initialScrollPosition daripada memanggil scrollToOffset di onMount.

@sahrens yup tanpa debug dan dengan mengoptimalkan build produksi berjalan lebih baik lebih sedikit berombak, seperti yang saya katakan sebelumnya saya menggunakan expo 17 yang menggunakan react-native 0.44, saya kira versi baru dari react-native (0.45 ) memiliki peningkatan pada FlatList .

btw, mengapa gaya dibuat di setiap render? dalam hal ini render dengan gaya flex (dalam komponen Feed ) dieksekusi hanya sekali:

1. App render
2. Feed render
3. Kemudian beberapa FeedRow render

Sangat mirip dengan apa yang @lprhodes katakan kepada saya tentang loadFeed pada setiap render, saya mengerti bahwa render Feed dieksekusi hanya sekali, apakah ini benar?

Ketika Anda mengatakan initialScrollPosition maksud Anda initialScrollIndex kan? itu tidak berfungsi seperti scrollToOffset saya perlu menyembunyikan ListHeaderComponent (tinggi 48px) ketika Feed dipasang

Bagaimana dengan peringatan konsol ini? saya menggunakan PureComponent untuk renderItem kan?

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}

Terima kasih !!

Peringatan itu adalah jenis bug yang telah diperbaiki pada master, tetapi 85 detik untuk pemasangan awal Anda sangat lambat - Anda harus benar-benar menggali lebih dalam kode Anda untuk mencari tahu apa yang memakan waktu begitu lama. Ada banyak sumber daya di luar sana jika Anda mencari kinerja reaksi di Google, atau meminta bantuan di komunitas React yang lebih luas.

Dan ya, maksud saya initialScrollIndex . Anda harus mengimplementasikan getItemLayout agar berfungsi, yang seharusnya memperhitungkan ListHeaderComponent .

hebat @sahrens , saya takut dengan perangkat keras lama seperti iPad 3 atau versi OS iOS 9 ... pengujian pada perangkat yang lebih baru tidak ada masalah kinerja, saya ingin tahu apakah ada orang lain yang mengalami masalah perangkat keras yang sama ... Dalam beberapa saat Saya akan meminta komunitas untuk melihat apakah saya mendapatkan sesuatu yang lebih dalam, thks !!!

Hai saya diperbaiki dengan memberikan style={{ backgroundColor: 'white' }} ke daftar datar

Jadi @hramos & @sahrens , apa sebenarnya solusi terbaik untuk masalah ini dengan FlatList? Mengalami ini dengan react 0.44.0 using react-native-tab-vew , dan tidak terlalu jelas apa yang direkomendasikan oleh tim inti saat ini.

@sjmueller bukankah @sahrens mengatakan bahwa ini sudah diperbaiki di master?

@hramos Saya baru saja meninjau seluruh utas ini lagi. Saya mungkin melewatkannya, tetapi saya tidak melihat @sahrens menyebutkan bahwa FlatList menjadi tidak terlihat diperbaiki pada master. Saya juga tidak melihat komit/PR yang merujuk masalah ini, dan akhirnya tidak ada solusi yang disarankan untuk memperbaiki masalah.

Saya melihat bahwa @yaronlevi merekomendasikan pengaturan lazy={true} pada react-native-tab-view atau TabNavigator , tetapi itu menyebabkan penundaan yang gelisah bahkan pada iPhone 7 plus.

@knappdev mengatakan ini berfungsi tanpa lazy pada 0.44.2 dan seterusnya, jadi saya akan mencoba memutakhirkan dari 0.44.0 dan melihat apakah saya berhasil.

Pekerjaan saya adalah mengaktifkan/menonaktifkan removeClippedSubviews tergantung pada apakah daftar datar sedang digunakan atau tidak.

  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 sekarang mati secara default untuk FlatList.

Untuk masalah pada perangkat yang lambat, sudahkah Anda mencoba aplikasi RNTester FlatListExample?

Bagaimana kinerja FlatListExample untuk Anda?

removeClippedSubviews sekarang mati secara default untuk FlatList.

Ya - itu sebabnya saya menyalakannya saat benar-benar menggulir. Saya mendapatkan lebih sedikit kegugupan acak seperti itu.

Saya kemudian mengganti (jauh) sel yang tidak terlihat dengan yang kosong untuk mengurangi memori yang terdengar lebih jauh daripada yang dilakukan FlatList dengan sendirinya

Jadi, akhirnya, masih tidak ada cara untuk memperbaikinya daripada menggunakan removeClippedSubviews={false} meskipun kinerjanya sangat mahal?

Perbaikan untuk saya adalah menonaktifkan debugging js dari jarak jauh untuk simulator ios

Pengaturan lazy: true tampaknya berhasil untuk saya. Belum dites performanya.

Saya memecahkan masalah ini dengan removeClippedSubViews={false}

PEKERJAAN TERBAIK DI SEKITAR
Bekerja pada semua perangkat keras/simulator. removeClippedSubViews={false} tidak selalu berfungsi di iPhone 7.

Pastikan untuk memaksa gerakan dalam tampilan daftar.

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

Contoh referensi.

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

Masalahnya mungkin sudah terpasang

Pada 24 Agustus 2017, pukul 15:44, Peter Suwara [email protected] menulis:

BEKERJA SEKITAR
Bekerja pada semua perangkat keras/simulator.

'''componentDidMount() {
requestAnimationFrame(() => {
// HACK UNTUK MEMULAI ULANG DATA
this.refs._list.scrollTo({x: 1, y: 0, animation: false})
});
}'''

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

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau matikan utasnya.

Saya memecahkan masalah ini, setidaknya pada simulator, dengan:

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

Dugaan saya di sini adalah bahwa rutinitas yang mengelola clippedSubviews tidak memeriksa batas dengan benar ketika ListView saat ini tidak ada di layar. Ini cukup sering terjadi dengan komponen ListView apa pun yang merender di luar layar dan kemudian bergerak di layar. Ini seharusnya tidak terlalu sulit untuk diperbaiki.

Saya cukup yakin fungsi ini adalah masalahnya: https://github.com/facebook/react-native/blob/master/React/Views/RCTView.m#L321 -L369

Dugaan saya adalah bahwa ruang koordinat yang diukurnya salah di beberapa tempat. Melihatnya sekarang.

Ini mungkin perbaikannya? https://github.com/facebook/react-native/pull/15669/files

Masih tidak ada perbaikan untuk ini?

@petersuwara : apa yang Anda usulkan bekerja. Terima kasih. @MattFoley : Kapan perbaikan Anda tersedia untuk diunduh?

Tidak spesifik hanya Untuk FlatList, tampaknya menjadi masalah dalam memuatnya di ListView juga.
Saya menemukan solusi dengan menggunakan sedikit penundaan dalam mengatur sumber data.

Ketika data dimuat dari sumber jauh dalam metode componentWillMount, kode berikut dijalankan.
Tampaknya berfungsi:

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

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

        })
}

Dan selama sedikit penundaan, Anda selalu dapat menampilkan layar pemuatan. Saking pendeknya bahkan tidak terlihat.

Saya menemukan metode @nathvarun berfungsi. Tampaknya ada beberapa kondisi balapan antara utas pemasangan komponen dan utas sumber data pembaruan komponen. Jika ini memang masalahnya, saya bingung mengapa ini terjadi karena kedua utas harus bermain secara berurutan dengan baik satu sama lain.

Ini terjadi pada komponen yang sudah dipasang seperti layar yang ditetapkan ke tab dalam navigasi reaksi tetapi lebih dipilih saat ini - jadi saya tidak yakin bagaimana perubahan ke componentWillMount dapat memperbaikinya.

PR saya di atas tampaknya telah memperbaiki masalah, tetapi saya tidak beruntung untuk menggabungkannya. Apakah ada orang lain yang ingin ikut campur dalam PR itu?

@MattFoley Apakah

Mengonfigurasi TabNavigator dari react-navigation menjadi lazy: true juga berfungsi... Tapi akan sangat bagus untuk melihat ini diperbaiki oleh react-native .

Jika Anda menggunakan SectionList atau Flatlist, cukup gunakan ref = {(ref)=> this.sectionList = ref }
dan dalam kode Anda this.sectionList.recordInteraction() - harus membuat tampilan Anda

Perbaikan yang diusulkan https://github.com/facebook/react-native/commit/03ae65bc25185fe6d7f62e66f5575ced5c3e8378

Saya baru saja memperbarui dan saya masih melihat masalah ini pada <ListView /> . Apakah saya melakukan sesuatu yang salah? Ini package.json saya:

  "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"
  },

saya pikir ListView sudah ditinggalkan sekarang. lebih baik coba dengan FlatList dan lihat ada apa.

Saya yakin kita masih melihat ini di 0.50.3. Ada yang bisa konfirmasi lagi?

Saya memperbaiki masalah ini dengan beralih ke FlatList.
Pada Jum, 17 Nov 2017 jam 08:39 Colin Ramsay [email protected]
menulis:

Saya yakin kita masih melihat ini di 0.50.3. Ada yang bisa konfirmasi lagi?

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/facebook/react-native/issues/1831#issuecomment-345294840 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AAZnGZ9oz7uKXx-wz3KFg-FSIzejAfM6ks5s3bavgaJpZM4FP1nt
.

Ah, kita sudah _using_ FlatList.

Ini masih menjadi masalah dengan 0.50.3. removeClippedSubviews tampaknya tidak berpengaruh. Bisakah kita membuka kembali ini?

Kami masih memiliki masalah di 0.50.3. Silakan buka kembali yang ini.

Maaf mengganggu lagi, tapi bisakah kita membukanya kembali? Ini adalah masalah yang mendesak.

Mengalami ini menggunakan Expo React Native SDK terbaru. Itu hanya terjadi pada ListView ketiga di TabNavigator. Jika saya menukar halaman ke-2 dan ke-3, maka halaman ke-3 yang baru akan terpengaruh. removeClippedSubviews memang memperbaikinya dalam kasus saya.

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

menggunakan this.listView.scrollToEnd() tidak berhasil , jadi saya harus menghitung koordinat akhir daftar secara manual untuk kemudian diteruskan ke scrollTo()

Untuk flatlist ini bisa disebabkan oleh memperbarui array yang sama. FlatList memeriksa apakah datanya berbeda. Jadi manfaatkan array yang tidak dapat diubah

removeClippedSubviews={false} memperbaiki bug untuk kasus saya.

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

@edmengel benar. Saya sedang mengerjakan sebuah proyek dan memiliki bug yang persis sama.

Sebelum menggulir:

Setelah bergulir:

React-native-router-flux@^4.0.0-beta.27 digunakan untuk navigasi dan App.js mengembalikan ini. Halaman pencarian saya berisi tampilan daftar dan memiliki bug ini. Itu ada di tab ketiga.

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

Ketika saya mengubah halaman pencarian (yang berisi tampilan daftar) dari tab ketiga ke tab kedua, tampilan daftar berfungsi dengan baik.

Menemukan Hack yang berfungsi untuk ini.

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

<Flatlist style={{ flex: 1 }}/>
Trik ini bekerja untuk saya.

Masalah yang sama pada 0.55.4 dengan ScrollView dan ListView . Menambahkan removeClippedSubviews={false} berhasil.

Sayangnya, dalam kasus kami, ini bukan opsi, karena diperlukan untuk menghindari gambar yang hilang di Android https://github.com/facebook/react-native/issues/13600#issuecomment -315629140

Menggulir bolak-balik pada render hanya terjadi setelah navigasi jadi, sepertinya beralih ke layar yang awalnya kosong.

Melenturkan pandangan juga tidak membantu.

Ada saran lain?

Saya menemukan itu hanya terjadi setelah posisi gulir tertentu ...
https://streamable.com/l5arv

Menggunakan chrome-devtools untuk memeriksa tampilan, saya dapat melihat bahwa semua subview terpotong.

Masih macet, @hramos tolong buka kembali.

Masih mengalami masalah dengan fungsi yang begitu sederhana? Inilah sebabnya mengapa kami pindah dari React Native kembali ke kode Native langsung.

Jika sesederhana itu, tolong bantu saya untuk memperbaikinya @petersuwara

Masalah ini telah ditutup untuk sementara waktu. Jika ini memengaruhi Anda, _harap buka edisi baru_ dan berikan detail sebanyak mungkin. Saya mengunci masalah ini karena masalah asli yang dilaporkan di sini telah diperbaiki, dan tidak jelas setiap orang yang berkomentar setelah itu menghadapi masalah yang sama persis.

Kami menggunakan FlatList _secara luas_ di Facebook, dan tidak ada keluhan semacam ini yang muncul secara internal. Mungkin jenis masalah ini terjadi dengan perpustakaan navigasi tertentu, misalnya. Membuka masalah baru dengan informasi lebih lanjut tentang masalah Anda, dengan daftar langkah-langkah yang jelas untuk repro, atau idealnya proyek kecil, akan sangat membantu.