ios - 如何在 React Native 中获取 contentOffset 属性的 ScrollView 组件的内容高度？

Question

对于我当前的项目，我正在创建一个日记/日历类型的组件，当用户单击以查看该 View 时，该组件会居中显示当前日期(日记 View )或当前月份(日历 View )。

我正在使用 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 ，它在计算布局后立即触发。

This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.

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

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