React Native - Paginasi ListViews di ScrollView?

Saya memiliki 3 komponen ListView di dalam satu komponen ScrollView seperti ini:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

Komponen Header memiliki beberapa konten umum dan juga memiliki 3 tab, yang memicu menampilkan masing-masing ListView

Masalahnya adalah ListView dengan onEndReached={() => alert('load more 1')} tidak pernah menjalankan peringatan, jadi saya tidak akan pernah dapat memuat lebih banyak lagi saat saya menggulir ke bawah dan mencapai akhir tampilan daftar. Hapus pembungkus ScrollView dan peringatan berjalan, tetapi Header yang umum tidak bergulir, karena kita baru saja menghapus pembungkus ScrollView. Header perlu digulir dengan tampilan daftar, itulah sebabnya saya membungkus semua yang perlu digulir di ScrollView.

CATATAN PENTING: Saya tidak bisa menggunakan ListView dengan renderHeader={this.header}, untuk skenario ini. Karena, meskipun Header akan bergulir, ia akan merender Header umum dan 3 tab untuk masing-masing ListView setiap kali ListView dirender, bukan sekali. Jadi perenderan Header baru setiap kali untuk setiap ListView tidak akan memotongnya untuk aplikasi.

Mencari solusi untuk masalah ini, di mana Header bergulir dengan tampilan daftar dan onEndReached dipicu untuk ListView yang terlihat.


react-native react-native-scrollview react-native-listview
person Wonka    schedule 11.08.2016    source sumber
comment
Apakah Anda memerlukan tab header untuk dianimasikan sama sekali saat beralih di antara tab tersebut (mis. Contoh menunjukkan baris atas dan bawah yang dianimasikan)   -  person Luke Rhodes    schedule 07.09.2016
comment
Selain itu, jika Anda tidak memerlukan Header untuk dianimasikan - mengapa menjadi masalah bagi Anda jika Header dirender ulang di setiap ListView, selama statusnya tetap ada?   -  person Luke Rhodes    schedule 07.09.2016
comment
@Luke Rhodes Tidak perlu menganimasikan header saat beralih, tapi saya tidak ingin header dirender ulang untuk setiap tampilan daftar pada perubahan tab, karena terlihat putih di mana header berada saat dirender ulang, tetapi hanya bagian bawah bagian (tampilan daftar) adalah apa yang harus berubah seiring dengan pilihan tab yang sesuai.   -  person Wonka    schedule 07.09.2016

Jawaban (3)


arrow_upward
2
arrow_downward

Saya pikir Anda harus menyelesaikan ini dengan mengubah dataSource di setiap listView sebagai respons terhadap elemen header yang dipilih alih-alih memuat tiga ListView yang berbeda.

getInitialState() {
    return {
        currentList: this.ds.cloneWithRowsAndSections(INITIAL_DATA);
    }
},
render() {
    return <ListView renderHeader={this._renderHeader} dataSource={this.state.currentList}/>
}

Satu-satunya alasan Anda tidak ingin melakukan ini adalah jika Anda ingin mempertahankan posisi gulir di tiga sub ListViews, tapi itu tidak akan berguna karena Anda selalu harus menggulir ke atas untuk mengubah ListView mana yang Anda cari. bagaimanapun juga.

Kemudian dalam fungsi _renderHeader Anda akan merender pemilih yang mengisi currentList dengan data berbeda bergantung pada header yang dipilih.

person frank    schedule 06.09.2016
comment
Ya! Header sekarang bergulir dengan konten, memuat lebih banyak ketika saya sampai di bagian bawah, dan tidak mem-flash header secara putih saat merender ulang tampilan daftar. Solusi hebat! Terima kasih jujur ​​:) - person Wonka; 07.09.2016

arrow_upward
0
arrow_downward

Dalam penataan gaya, Anda dapat mengatur posisinya sebagai relatif dengan top:0 dan left:0 . Dengan cara ini akan tetap statis di atas.

<View>
<Header style={{position:"relative",top:0,left:0,height:30,width:Dimensions.get("window").width}} />
  <ListView />
  <ListView />
  <ListView />
 <Footer />
 </View>

Opsi kedua yang mungkin berfungsi di tampilan gulir adalah menentukan ketinggian untuk ketiga ListView.

person while1    schedule 11.08.2016
comment
Terima kasih atas tanggapan Anda sementara1. Opsi 1 tidak akan menggulir Header menurut saya karena tidak ada di ScrollView, dan saya memerlukan header untuk menggulir saat Anda menggulir ke bawah. Maksud saya statis, tidak boleh dirender ulang, tetapi tetap digulir dengan isi. Opsi 2, ini adalah ukuran dinamis dan memuat lebih banyak seiring berjalannya waktu, jadi tidak yakin bagaimana ketinggian akan bekerja di sana. - person Wonka; 11.08.2016

arrow_upward
0
arrow_downward

Anda mungkin dapat menggunakan ScrollView::onScroll tetapi ini akan sedikit rumit. Anda perlu mengetahui ukuran tampilan daftar Anda.

Bekerja dengan ListView saja

Mungkin solusi terbaik adalah bermain-main dengan fungsi ListView dataSource dan onEndReached.

Jika Anda memperbarui kumpulan data Anda saat ListView::onEndReached dipicu, saya rasa Anda dapat menambahkan lebih banyak elemen ke ListView Anda. Dengan cara ini, Anda tidak perlu melakukan hal-hal hacky dengan ListViews di ScrollViews.

person Julien Deniau    schedule 06.09.2016
comment
Masalahnya adalah ketinggian item tampilan daftar bisa jadi dinamis (tingginya mungkin sedikit berbeda untuk setiap elemen), jadi solusinya harus fleksibel. Bekerja dengan tampilan daftar saja tidak akan menggulir header juga, lihat Catatan Penting yang dimaksud untuk masalah header yang dirender ulang lagi saat menggunakan tampilan daftar saja. - person Wonka; 07.09.2016