web-dev-qa-db-fra.com

Onglets avec des flatlistes à l'intérieur de ScrollView - comme des pages de profil Instagram ou Twitter

J'aimerais avoir un ensemble d'onglets qui ont chacun un FlatList à l'intérieur d'un ScrollView. Ceci est similaire à la mise en page d'Instagram ou Twitter.

Je suis conscient qu'il y a des problèmes avec un FlatList à l'intérieur d'un ScrollView et de se faire suivre pour être déclenché, car seuls les événements de défilement ScrollView sont enregistrés?

Il en résulte que l'intérieur onEndReached étant appelé immédiatement sur la charge, puis encore encore et encore ...

Si vous faites le défilement ScrollView ScrollyAd False et flex: 1 à la place de flexGrow: 1 Ensuite, vous pouvez faire défiler les flatlistes intérieurs, mais le contenu externe n'a pas ... Cela ressemble à ceci:

enter image description here

Je pense qu'il y a beaucoup de gens qui luttent avec ce problème et je ne trouve pas une solution vraiment claire n'importe où.

J'ai aussi essayé de mettre en œuvre react-navigation-collapsible avec createMaterialTopTabNavigator pour créer les onglets. Cependant, vous ne pouvez pas implémenter une pull-rafraîchir sur l'écran entier?

Toute aide serait très appréciée.

Mise à jour

J'ai également examiné la mise en œuvre: Flatlist à l'intérieur de ScrollView ne fait pas défiler

Et j'ai examiné de manière dynamique la propriété défilée (même s'il crée un re-rendu. Cela fonctionne presque ... mais il y a un problème avec la hauteur ScrollView étant flexGrow: 1 et l'intérieur FlatList ne remplit pas l'espace ...

Deuxième mise à jour

Cette collation fait presque la bonne chose ... https://snack.expo.io/@satya164/collapsible-header-with-tabview Il utilise react-native-tab-view et effondre l'en-tête à l'aide d'animation. Si l'en-tête était un composant, il pourrait récupérer des données sur la charge, mais vous n'obtiendrez qu'un rafraîchissement de la liste intérieure (contrairement à Instagram).

Questions connexes:

Il y a un problème avec Onendeheached étant appelé infiniment - https://github.com/facebook/react-native/issues/18887 - https://github.com/facebook/reacct -natif/Problèmes/6002

Flatlist ne peut pas fonctionner directement dans un ScrollView ... - https://github.com/facebook/react-native/issues/12827#issuecomment-320509824

Flatlist à l'intérieur ScrollView - https://github.com/facebook/react-native/issues/19971

Flatlist à l'intérieur ScrollView ne fait pas défiler - https://github.com/facebook/react-native/issues/19971

L'enfant de la flatliste appelle surNached sur le rendu - https://github.com/react-native-community/react-native-tab-eview/issues/501

Réagis Native List Nuppedviewsweview Tiggers OnENDREDHEDED Multiums Times - réagir à la liste nichée de Nettyview Crigments surNeRached à plusieurs reprises sur le chargement

Lorsque la plate-forme enveloppée à l'intérieur de Scolleview, onNeDeheded ne fonctionne pas attendu. - https://github.com/facebook/react-native/issues/22008

Disposition de profil ressemblant à twitter - Comment créer Twitter comme la mise en page de profil? Mais je crois que la réponse est maintenant pas correcte.

reactjsreact-nativescrollviewreact-native-flatlist
25
Alex Chin

C'est un moyen de résoudre le problème:

<ScrollView
          showsVerticalScrollIndicator={false}
          stickyHeaderIndices={[1]} //give any view index which you wana stick
          >
          <Header1 />
          <TabBar />
          <ViewPager
            ref={viewPagerRef}
            style={{
              flexGrow: 1,
            }}
            scrollEnabled={false}
            initialPage={0}
            orientation="horizontal">
            <Page1 key="1" />
            <Page2 key="2" />
            <Page3 key="3" />
          </ViewPager>
        </ScrollView>
0
Bishal Saikia