Bereaksi-Asli wadah VirtualizedList yang didukung lainnya

Setelah meningkatkan ke reaksi-asli 0,61 saya mendapatkan banyak peringatan seperti itu:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Apa VirtualizedList-backed containeryang harus saya gunakan, dan mengapa sekarang disarankan untuk tidak menggunakan seperti itu?

Jika seseorang masih mencari saran untuk masalah yang dijelaskan oleh @Ponleu dan @David Schilling di sini (mengenai konten yang melampaui FlatList), maka inilah pendekatan yang saya ambil:

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

Anda dapat membaca lebih lanjut tentang ini di sini: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Semoga ini membantu seseorang. :)

Kalau-kalau ini membantu seseorang, ini adalah bagaimana saya memperbaiki kesalahan dalam kasus saya.

Saya memiliki FlatListsarang di dalam ScrollView:

render() {
    return (
        <ScrollView>
            <h1>{'My Title'}</h1>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <h2>{'Loading...'}</h2>}
        </ScrollView>
    );
}

dan saya menyingkirkannya ScrollViewdengan menggunakan FlatListuntuk membuat semua yang saya butuhkan, yang menghilangkan peringatan:

render() {
    const getHeader = () => {
        return <h1>{'My Title'}</h1>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <h2>{'Loading...'}</h2>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}

Melihat contoh-contoh dalam dokumen saya telah mengubah wadah dari:

<ScrollView>
    <FlatList ... />
</ScrollView>

untuk:

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

dan semua peringatan itu hilang.

Menurut pendapat saya, saya bisa menggunakan peta, bukan FlatList. Tetapi dalam kasus saya, saya tidak ingin menampilkan daftar besar. Tidak menggunakan FlatList dapat menyebabkan masalah kinerja. jadi saya menggunakan ini untuk menekan peringatan https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

Peringatan muncul karena ScrollViewdan FlatListberbagi logika yang sama, jika FlatListdijalankan di dalam ScrollView, itu diduplikasi

Ngomong-ngomong SafeAreaViewtidak bekerja untukku, satu-satunya cara untuk menyelesaikannya adalah

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

Kesalahan hilang

Saya mencoba beberapa cara untuk menyelesaikan ini, termasuk ListHeaderComponentatau ListFooterComponent, tetapi semuanya tidak cocok untuk saya.

tata letak yang ingin saya capai adalah seperti ini, dan saya ingin digulir sekali.

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

Pertama saya ingin mengucapkan terima kasih atas masalah dan komentar ini, yang memberi saya banyak ide.

Saya memikirkan ListHeaderComponenttempat di atas Flatlist, tetapi karena Flatlistarah saya adalah kolom, tajuk yang ingin saya tempatkan berada di sebelah kiri Flatlist:(

Kemudian saya harus mencoba VirtualizedList-backedsesuatu. Saya hanya mencoba untuk mengemas semua komponen VirtualizedList, di mana renderItemsmemberikan indeks dan di sana saya dapat melewati komponen bersyarat renderItems.

Saya bisa bekerja dengan ini Flatlist, tetapi saya belum mencoba.
Akhirnya terlihat seperti ini.

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />  

dan tentu saja dapat menggulir seluruh layar.

Masalah ini muncul saat Anda menggunakan <FlatList />bagian dalam <ScrollView>dengan orientasi yang sama.

Untuk memperbaiki ini, cukup tambahkan "horisontal" ke FlatList Anda:

<ScrollView>
    <FlatList **horizontal** ... />
</ScrollView>

NB: FlatList Anda akan dirender secara horizontal