web-dev-qa-db-fra.com

React-Native: obtenir la page actuelle dans FlatList lors de l'utilisation de pagingEnabled

J'ai une FlastList qui ressemble à ceci:

<FlatList
     pagingEnabled={true}
     horizontal={true}
     showsHorizontalScrollIndicator={false}
     data={[ {key:"A"}, {key:"B"} ]}
     renderItem={ ({item, index}) => <MyComponent /> }
 />

J'ai la largeur de l'ensemble de composants de sorte qu'une seule page s'affiche à l'écran à la fois. Comment puis-je déterminer ce qu'est la page actuelle (ou alternativement, le composant actuel affiché)?

react-nativereact-native-flatlist
17
mathew

J'ai construit un composant avec un VirtualizedList comme le vôtre, avec la pagination activée. J'ai utilisé le gestionnaire onMomentumScrollEnd de ScrollView pour déterminer la page actuelle en fonction de contentOffset. Le gestionnaire onMomentumScrollEnd est appelé lorsque l'animation de défilement s'arrête après que l'utilisateur a glissé entre les pages. Il a un objet événement comme l'événement onScroll standard. Vous pouvez utiliser le nativeEvent.contentOffset.x pour déterminer sur quelle page vous vous trouvez comme ceci:

class Example extends React.Component {

  onScrollEnd(e) {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;

    // Divide the horizontal offset by the width of the view to see which page is visible
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    console.log('scrolled to page ', pageNum);
  }

  render() {
    return 
      <VirtualizedList 
        horizontal
        pagingEnabled
        onMomentumScrollEnd={this.onScrollEnd} />
  }
}

J'ai laissé d'autres accessoires VirtualizedList pour économiser de l'espace. Le composant FlatList est construit sur VirtualizedList, donc l'exemple devrait fonctionner pour vous.

40
A. Goodale