scrollview子元素度量始终返回frameoffsety = 0

Question

我想使用 ScrollView的 scrollTo方法，滚动到按下的元素。

ScrollView中的每个孩子都有一个ref，并且该度量是用onLayout Prop触发的，在状态上有offsetY足以正确触发滚动。

但是，frameOffsetY上返回的this.componentRef.measure上返回的值始终为0，因此它始终滚动到ScrollView的开头。

在儿童组件的代码下方

  measureOffset() {
    this.componentRef.measure(
      (frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY) => {
        console.log(frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY);
        this.setState({ offsetY: frameOffsetY });
      }
    );
  }
  render() {
    return (
      <View
        ref={ref => this.componentRef = ref}
        style={{ opacity: 1, flex: 1 }}
        onLayout={() => this.measureOffset()}
      >
      ...
      </View>
    );
 }

父组件是scrollview

  renderBuses() {
    return this.props.buses.map(bus =>
      <BusDetail 
        key={bus.reg_code} 
        bus={bus} 
        scrollTo={y => ScrollViewRef.scrollTo({ y })}
      />
    );
  }
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#e6e6e6' }}>
        <ScrollView 
          style={{ flex: 1 }}
          ref={ref => ScrollViewRef = ref}
        >
          {this.renderBuses()}
        </ScrollView>
      </View>
    );
  }

我不确定我是否缺少某些东西或是React Native的错误。

感谢您提前的帮助。

Answer 1

请注意，在渲染以本机中完成后，这些测量值才可用。如果您需要尽快测量，请考虑使用on Laylayout道具。

请参阅此处

初始化时将调用on Layout，此处的呼叫测量将无法获得实际的测量。

有一个关于on Layout函数的参数，使用这样的使用

onLayout={(e)=>{
  let obj = e.nativeEvent.layout;
  console.log(obj.width);
  console.log(obj.height);
}