3 
  _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() 调用中，我想调用一些加载更多分页代码，并且我想再加载 10 条记录。

问题是当我只滚动到 3 或 4 条记录时，正在调用 _handleScroll() 并且分页也会调用，并且将加载另外 10 条记录。

因为，ScrollView 高度大于窗口高度。那么，如何获得 Scrollview 的实际高度以及 Scrollview 何时仅在底部滚动然后调用我的分页函数？

谢谢你。

4

0 回答 0