web-dev-qa-db-fra.com

React Native - Pagination de ListViews dans ScrollView?

J'ai 3 composants ListView dans un seul composant ScrollView comme ceci:

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

Le composant Header a un contenu commun et a également 3 onglets, qui déclenchent l'affichage de la ListView respective

Le problème est que toutes les variables ListView avec onEndReached={() => alert('load more 1')} ne lancent jamais l'alerte. Par conséquent, je ne peux jamais en charger plus lorsque je fais défiler l'écran vers le bas pour atteindre la fin de la liste. Supprimez l'habillage ScrollView et l'alerte est exécutée, mais le Header commun ne défile pas, car nous venons de supprimer l'habillage ScrollView. L'en-tête doit faire défiler avec listview, c'est pourquoi j'ai emballé tout ce qui doit défiler dans la variable ScrollView.

REMARQUE IMPORTANTE: Je ne peux pas vraiment utiliser ListView avec renderHeader={this.header}, pour ce scénario. En effet, même si la variable Header défilera, elle restituera la variable Header courante et les 3 onglets de chaque variable ListView à chaque fois qu'une variable ListView sera rendue au lieu d'une fois. Ainsi, un nouveau récurseur Header à chaque fois pour chaque ListView ne le coupera pas pour l'application.

A la recherche d'une solution à ce problème, où la variable Header défile avec les vues de liste et la variable onEndReached est déclenchée pour la variable visible ListView.

react-nativereact-native-listviewreact-native-scrollview
15
Wonka

Je pense que vous allez devoir résoudre ce problème en modifiant la source de données dans chaque listView en réponse à l'élément d'en-tête sélectionné au lieu de charger trois ListViews différents. 

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

La seule raison pour laquelle vous ne voudriez pas faire cela, c'est si vous vouliez conserver la position de défilement dans les trois sous-vues ListViews, mais cela ne serait pas utile car vous devez toujours faire défiler vers le haut pour changer le ListView que vous cherchez. en tout cas.

Ensuite, dans votre fonction _renderHeader, vous rendrez un sélecteur qui remplit currentList avec des données différentes en fonction de l'en-tête sélectionné.

2
frank

Dans le style, vous pouvez définir sa position relative avec top: 0 et left: 0. De cette façon, il restera statique en haut. 

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

La deuxième option qui peut fonctionner dans scrollview consiste à spécifier la hauteur pour les trois listes.

0
while1

Vous pouvez peut-être utiliser ScrollView::onScroll mais ce sera un peu hacky. Vous aurez besoin de connaître la taille de vos listes de vues.

Travailler avec ListView uniquement

La meilleure solution sera peut-être de jouer avec les sources ListView et la fonction onEndReached.

Si vous mettez à jour votre jeu de données lorsque ListView::onEndReached est déclenché, je pense que vous pouvez ajouter plus d'éléments à votre ListView. De cette façon, vous n'avez pas besoin de faire des choses difficiles avec ListViews dans ScrollViews.

0
Julien Deniau