Başka bir VirtualizedList destekli kapsayıcıyı yeniden etkinleştirme

Reaksiyon yerli 0.61 yükselttikten sonra böyle uyarılar bir sürü olsun:

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

VirtualizedList-backed containerKullanmam gereken diğer nedir ve neden böyle kullanmamanız tavsiye ediliyor?

Birisi hala @Ponleu ve @David Schilling'in burada açıkladığı soruna bir öneri arıyorsa (FlatList'in üstündeki içerikle ilgili), o zaman benim aldığım yaklaşım budur:

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

Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Umarım birine yardımcı olur. :)

Bunun birine yardım etmesi durumunda, benim durumumdaki hatayı böyle düzelttim.

FlatListİçinde bir yuva vardı 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>
    );
}

ve uyarıdan kurtulan ihtiyacım olan her şeyi oluşturmak için ScrollViewkullanarak FlatListkurtuldum:

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

Kapsayıcıdaki örneklere bakarak kapsayıcıyı değiştirdim:

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

için:

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

ve tüm bu uyarılar kayboldu.

Bence FlatList yerine haritayı kullanabilirim. Ama benim durumumda büyük bir liste göstermek istemiyorum. FlatList kullanılmaması performans sorununa neden olabilir. bu yüzden uyarı bastırmak için bunu kullandım https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

Uyarı görünür ScrollViewve FlatListaynı mantığı paylaşır, FlatListiçeride çalıştırılırsa ScrollViewçoğaltılır

Bu arada SafeAreaViewbenim için çalışmıyor, çözmenin tek yolu

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

Hata kayboluyor

Bunu çözmek için bazı yollar denedim, ListHeaderComponentya da dahil ListFooterComponent, ama hepsi benim için uygun değildi.

ulaşmak istediğim düzen böyle ve bir kez kaydırılmak istedim.

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

Öncelikle bana bir sürü fikir veren bu konu ve yorumlar sayesinde söylemek istiyorum .

ListHeaderComponentFlatlist'in üstündeki yerleri düşünüyordum , ama benim yönüm Flatlistsütun olduğu için yerleştirmek istediğim başlık Flatlist: solda gitti :(

Sonra bir VirtualizedList-backedşey denemek zorunda kaldım . Sadece tüm bileşenleri paketlemeye çalıştım VirtualizedList, burada renderItemsdizin verir ve orada bileşenleri şartlı olarak geçebilir renderItems.

Bununla çalışabilirdim Flatlist, ama henüz denemedim.
Sonunda böyle görünüyor.

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

ve elbette tüm ekranı kaydırabilir.

Bu sorun , aynı yönde <FlatList />içeride kullandığınızda gelir <ScrollView>.

Bunu düzeltmek için FlatList'inize "yatay" ekleyin:

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

Not: FlatList'iniz yatay olarak oluşturulacak