web-dev-qa-db-fra.com

React-Native un autre conteneur soutenu par VirtualizedList

Après la mise à niveau vers la version 0.61 native de Reactive, je reçois de nombreux avertissements comme celui-ci:

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

Quel est l'autre VirtualizedList-backed container que je devrais utiliser, et pourquoi est-il maintenant conseillé de ne pas utiliser comme ça?

javascriptreactjsreact-native
36
David Schilling

À mon avis, je peux utiliser map au lieu de FlatList. Mais dans mon cas, je ne veux pas afficher une grande liste. Ne pas utiliser FlatList peut entraîner des problèmes de performances. j'ai donc utilisé cela pour supprimer l'avertissement https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

0
tvankith

L'avertissement s'affiche car ScrollView et FlatList partagent la même logique, si FlatList s'exécute à l'intérieur ScrollView, il est dupliqué

Par ailleurs SafeAreaView ne fonctionne pas pour moi, la seule façon de résoudre est

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

L'erreur disparaît

0
Tuan Dat Tran

J'ai essayé plusieurs façons de résoudre ce problème, notamment ListHeaderComponent ou ListFooterComponent, mais tout ne me convenait pas.

la disposition que je voulais réaliser est comme ça, et je voulais faire défiler une fois.

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

Je veux d'abord dire merci à this numéro et commentaires, ce qui m'a donné beaucoup d'idées.

Je pensais à ListHeaderComponent places au-dessus de la Flatlist, mais comme la direction de mon Flatlist était la colonne, l'en-tête que je voulais placer était à gauche de Flatlist :(

Ensuite, j'ai dû essayer VirtualizedList-backed chose. J'ai juste essayé d'emballer tous les composants dans VirtualizedList, où renderItems donne l'index et là je pouvais passer des composants conditionnellement à renderItems.

J'aurais pu travailler avec Flatlist, mais je n'ai pas encore essayé.
Enfin, cela ressemble à ceci.

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

et bien sûr capable de faire défiler tout l'écran.

0
Takahiro Nishino