如何获得react-native动态scrollview实际高度

时间:2018-06-14 13:13:27

标签: react-native scrollview react-native-scrollview

  _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然后调用我的分页功能?

谢谢。

0 个答案:

没有答案