如何在React Native中获取contentOffset prop的ScrollView组件的内容高度？

Question

对于我当前的项目，我正在创建一个日记/日历类型组件，当用户单击查看该视图时，该组件会居中显示当天（日记视图）或当月（日历视图）。

我正在使用 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 方法触发之后？

Answer 1

onContentSizeChange在内部使用onLayout，一旦计算出布局就会触发。

一旦计算出布局，就会立即触发此事件，但在接收到该事件时，新的布局可能尚未反映在屏幕上，特别是在布局动画正在进行时。

在此之前没有办法获得尺寸。因此，您可以做的是将滚动视图设置为 0，直到触发opacity第一个滚动视图。onContentSizeChange

我建议您使用Animated.Value更改不透明度，这样它就不会重新渲染整个组件。