_handleScroll(event) {
event.preventDefault();
if (event.nativeEvent.contentOffset.y === styles.windowHeight || event.nativeEvent.contentOffset.y >= styles.windowHeight) {
console.log(event.nativeEvent.contentOffset.y);
{ this.state.showLoadMoreButton === true ? this._fetch_more_data_from_server() : null }
}
}
return (
<View style={this.state.loading ? styles.ridesScreenOuterDesignOpacity : styles.ridesScreenOuterDesign}>
<ImageBackground source={require('../assets/images/screencasts/citybackground.png')} style={styles.ridesScreenMainImageBackgroundCityBGDesign}>
<ScrollView onScroll={this._handleScroll} onMomentumScrollEnd={() => { this._enablePagination() }} style={styles.ridesScreenScrollViewDesign} scrollEnabled>
<ImageBackground source={require('../assets/images/screencasts/main_bg.png')} resizeMode="cover" style={styles.ridesScreenImageBackgroundMainBGDesign}>
<View style={styles.ridesScreenRidesTextImageHeaderViewDesign}>
<View style={styles.ridesTabUpperViewTextImageDesign}
>
<View style={styles.ridesScreenTextUpperMainView}>
{this.state.fontLoaded ? <Text style={styles.ridesTextDesign}>
Rides
</Text> : null}
</View>
<Image
source={
__DEV__
? require('../assets/images/ridesImages/Icons-rides.png')
: require('../assets/images/ridesImages/Icons-rides.png')
}
style={styles.ridesAvatarImageDesign}
/>
</View>
</View>
<View style={styles.ridesTabViewMainDesign}>
<TouchableOpacity onPress={() => this._tabViewOnPress("", "", "favourites")} style={this.state.hover === 'favourites' ? styles.ridesTabViewInnerBoxFavouritesDesignHovered : styles.ridesTabViewInnerBoxFavouritesDesign}>
{this.state.fontLoaded ? <Text style={this.state.hover === 'favourites' ? styles.ridesTabViewInnerBoxTextDesignSelected : styles.ridesTabViewInnerBoxTextDesign}>Your Favorites</Text> : null}
</TouchableOpacity>
<TouchableOpacity onPress={() => this._tabViewOnPress("", "", "latest")} style={this.state.hover === 'latest' ? styles.ridesTabViewInnerBoxLatestDesignHovered : styles.ridesTabViewInnerBoxLatestDesign}>
{this.state.fontLoaded ? <Text style={this.state.hover === 'latest' ? styles.ridesTabViewInnerBoxTextDesignSelected : styles.ridesTabViewInnerBoxTextDesign}>Latest</Text> : null}
</TouchableOpacity>
</View>
</ImageBackground>
<View style={styles.ridesBottomContent}>
<View>
{this.state.hover == 'favourites' ? this.state.favouritesData : null}
</View>
<View>
{this.state.hover == 'latest' ? this.state.latestData : null}
</View>
</View>
<Loading
ref="loading"
image={require('../assets/images/loadingImages/Preloader_5.gif')}
onRequestClose={() => null}
easing={Loading.EasingType.step0}
size={AppConstants.loadingImageLoaderSize}
imageSize={AppConstants.loadingImageSize}
/>
</ScrollView>
<LiveFooter navigation={this.props.navigation} current={'Rides'} />
</ImageBackground>
</View >
)
ridesScreenOuterDesignOpacity: {
flex: 1,
opacity: 0.5,
},
ridesScreenOuterDesign: {
flex: 1
},
ridesScreenMainImageBackgroundCityBGDesign: {
alignItems: 'center',
flex: 1,
height: null,
width: '100%',
zIndex: 2,
},
ridesScreenScrollViewDesign: { flex: 1, height: null, width: '100%' },
ridesScreenImageBackgroundMainBGDesign: { flex: 1, width: '100%', height: 220, zIndex: 0, },
此处所有数据都来自this.state.favouritesData和this.state.latestData,它有另一个不同的视图并包含动态数据。
第一次有10条记录,其高度大于屏幕高度。
在_handleScroll()调用上,我想调用一些Load More分页代码,我想再加载10个记录。
问题是当我只是滚动到3或4条记录时,正在调用_handleScroll()并且分页也会调用,并且将加载10条记录。
因为,ScrollView的高度大于窗口高度。 那么,我如何获得Scrollview的实际高度,以及何时只在底部滚动Scrollview然后调用我的分页功能?
谢谢。