Wie erhält man die Inhaltshöhe der ScrollView-Komponente für die PropertyOffset-Prop in "Reactive Native"?

Question

Für mein aktuelles Projekt erstelle ich eine Komponente vom Typ Tagebuch/Kalender, die den aktuellen Tag (Tagebuchansicht) oder den aktuellen Monat (Kalenderansicht) zentriert anzeigt, wenn der Benutzer auf diese Ansicht klickt.

Ich bin mit einem Scroll mein Gehalt zu halten:

_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> 
); 
} 

Ich versuche es auf Rendern auf dem aktuellen Monat Zentrum zu haben, aber weil meine aktuelle Methode (unter Verwendung von OnContentSizeChange) tritt nach machen, Es gibt einen Rahmen, in dem der Benutzer es unzensiert sieht, was eine schlechte Benutzererfahrung ist.

Gibt es eine Möglichkeit, die Inhaltshöhe einer ScrollView-Komponente vor/während des Renderns zu ermitteln oder die Komponentensichtbarkeit zu verzögern, nachdem die onContentSizeChange-Methode ausgelöst wurde?

Answer 1

onContentSizeChange verwendet intern onLayout, das ausgelöst wird, sobald das Layout berechnet wurde.

Dieses Ereignis wird sofort ausgelöst, sobald das Layout berechnet wurde, aber das neue Layout wird möglicherweise zum Zeitpunkt des Ereignisses noch nicht auf dem Bildschirm angezeigt, insbesondere wenn gerade eine Layoutanimation ausgeführt wird.

Es gibt keine Möglichkeit, die Größe vorher zu bekommen. Also, was Sie tun können, ist die opacity Ihrer Scrollview auf 0, bis die erste onContentSizeChange ausgelöst wird.

Ich rate Ihnen, Animated.Value zu verwenden, um die Opazitätsänderung vorzunehmen, damit es Ihre gesamte Komponente nicht erneut rendert.