2017-12-16 4 views
1

scrollToメソッドをScrollViewにして、押された要素までスクロールします。ScrollView子要素のメジャーは常に返されますframeOffsetY = 0

各子供はrefを持ち、小道具でトリガーされ、offsetYのスクロールが正しくスクロールするのに十分です。

frameOffsetYthis.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> 
    ); 
    } 

です。

ご協力いただきありがとうございます。

答えて

0

レンダリングがネイティブで完了するまで、これらの測定値は使用できません。できるだけ早く測定が必要な場合は、代わりにonLayoutプロップを使用することを検討してください。

は、初期化時に、ここでコール尺度は、実際の測定値を得ることはありませんと呼ばれるonLayout here

を参照してください。 onLayout関数の引数がある

は、この

onLayout={(e)=>{ 
    let obj = e.nativeEvent.layout; 
    console.log(obj.width); 
    console.log(obj.height); 
} 
のように使用します
関連する問題