react-native - 如何显示分页 ScrollView 的当前页码？

Question

ScrollView :

<View style={{flex:1}}>
    <ScrollView
        ref={(component) => {this._scrollView = component}}
        scrollEventThrottle={15}
        removeClippedSubviews={true}
        pagingEnabled={true}
        horizontal={true}
        onScroll={this._onScroll.bind(this)}>
        {items}
   </ScrollView>
   <Text style={styles.legend}>{this.state.currentPage}/{9}</Text
</View>

_onScroll :这个方法计算当前页数是多少

_onScroll(e) {
    let newPageNum = parseInt(e.nativeEvent.contentOffset.x/WINDOW_WIDTH+1);

    newPageNum != this.state.currentPage && this.setState({
        currentPage: newPageNum
    });
}

我认为代码行还可以，但是当我平移 scrollView 时到下一页，它将向后滚动。一旦我删除 _onScroll 中的代码行，问题可以解决，但我无法计算当前页数。

Answer 1

Math.round(parseFloat(event.nativeEvent.contentOffset.x/Dimensions.get('window').width));

会解决你的问题。