我想使用scrollTo
的ScrollView
方法,滚动到被按下的元素。
ScrollView
中的每个孩子都有一个ref
,并且用onLayout
道具触发测量,在状态上有offsetY
足以正确触发滚动。
但是,this.componentRef.measure
为frameOffsetY
返回的值始终为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的错误。
感谢您的帮助。
请注意,在本机完成渲染之后,这些测量才可用。如果您需要尽快进行测量,请考虑使用onLayout道具。
见here
初始化时将调用onLayout,此处的调用测量将无法获得实际测量值。
有一个onLayout函数的参数,像这样使用
onLayout={(e)=>{
let obj = e.nativeEvent.layout;
console.log(obj.width);
console.log(obj.height);
}