如何在React Native中獲取contentOffset prop的ScrollView組件的內容高度？

對於我當前的項目，我創建了一個日記/日曆類型組件，它顯示當用戶單擊以查看該視圖時居中的當前日期（日記視圖）或當前月份（日曆視圖）。如何在React Native中獲取contentOffset prop的ScrollView組件的內容高度？

我使用的是滾動型牽我的內容：

_getInitialOffset(h) { 
    const FIX = 75; //TODO: Make it less arbitrary 
    let percentToScroll = (this.props.viewedDate.month()+1)/12; //12 = number of months per year 
    let { height } = this.props; 
    let centerFix = height/2; 
    let contentHeight = h; 
    let yPos = contentHeight*percentToScroll - centerFix - FIX; 
    return (yPos > 0) ? yPos : 0; 
} 



render() { 
    var year = this.props.viewedDate.year(); 
    var cal = Calendar.get(year); 
    var contentHeight = this.contentHeight; 
    return (
    <View> 
     <View style={styles.daysOfWeek}> 
     { 
      Calendar.days().map(function(day, i) { 
      return <Text key={i} style={styles.dayHeader}>{day}</Text>; 
      }) 
     } 
     </View> 
     <ScrollView 
     ref={ref => {this._scrollView = ref}} 
     style={{ 
      height: this.props.height, 
      paddingTop: 15 
     }} 
     onContentSizeChange={(w, h) => { 
      this._scrollView.scrollTo({y: this._getInitialOffset(h), animated: false}); 
     }}> 
     <Year year={year} calendar={cal}/> 
     </ScrollView> 
    </View> 
); 
}

我試圖把它在中心上呈現目前的一個月，但因爲我目前的方法（使用OnContentSizeChange）發生後，渲染，有一個框架，用戶看到它未經審查，這是不好的用戶體驗。

有沒有辦法在渲染之前或渲染期間獲取ScrollView組件的內容高度，或者在onContentSizeChange方法觸發之前延遲組件可見性？

來源

2016-06-20 Steven Francus

您是否在使用約束？ –

React Native中的約束？ –

onContentSizeChange在內部使用onLayout一旦計算出佈局，就會觸發它。

佈局計算完成後立即觸發此事件，但新佈局可能尚未在接收事件時反映在屏幕上，特別是佈局動畫正在進行時。

在此之前無法獲得大小。所以你可以做的是設置你的滾動視圖的opacity爲0，直到第一個onContentSizeChange被觸發。

我建議您使用Animated.Value來進行不透明度更改，以免重新渲染整個組件。

來源

2016-06-20 08:44:15

如何在React Native中獲取contentOffset prop的ScrollView組件的內容高度？

回答

相關問題