web-dev-qa-db-ja.com

Reactネイティブ-ScrollViewからビューのYオフセット値を取得する方法？

ビューのスクロール位置を取得しようとしています。しかしページへのYオフセットの値は、ビューの位置とは関係ありません。

ScrollView階層：

<ScrollView>
  - MyComponent1
  - MyComponent2
    - SubView1
       - SubView2
         - <View> (Added ref to this view and passing Y offset value through props)
  - MyComponent3
 </ScrollView>

SubView2コンポーネント：

this.myComponent.measure( (fx, fy, width, height, px, py) => {
   console.log('Component width is: ' + width)
   console.log('Component height is: ' + height)
   console.log('X offset to frame: ' + fx)
   console.log('Y offset to frame: ' + fy)
   console.log('X offset to page: ' + px)
   console.log('Y offset to page: ' + py)

   this.props.moveScrollToParticularView(py)
})

<View ref={view => { this.myComponent = view; }}>

onScrollメソッドのSubView2ビューの正確な位置を確認しました。しかし、measure valueと一致しました。 measure valueが間違っていることがわかります。

ScrollView階層の問題ですか？

javascriptreact-nativeuiscrollviewscrollview
9
Balasubramanian

Viewコンポーネントには onLayout というプロパティがあります。このプロパティを使用して、そのコンポーネントの位置を取得できます。

onLayout

マウントとレイアウトの変更時に呼び出されます：

{nativeEvent: { layout: {x, y, width, height}}}

このイベントはレイアウトが計算されるとすぐに発生しますが、特にレイアウトアニメーションが進行中の場合は、新しいレイアウトがイベントの受信時にまだ画面に反映されていない可能性があります。

更新

onLayout propは親コンポーネントに位置を与えます。つまり、SubView2の位置を見つけるには、すべての親コンポーネントの合計を取得する必要があります（MyComponent2 + SubView1 + SubView2）。

サンプル

export default class App extends Component {
  state = {
    position: 0,
  };
  _onLayout = ({ nativeEvent: { layout: { x, y, width, height } } }) => {
    this.setState(prevState => ({
      position: prevState.position + y
    }));
  };
  componentDidMount() {
    setTimeout(() => {
      // This will scroll the view to SubView2
      this.scrollView.scrollTo({x: 0, y: this.state.position, animated: true})
    }, 5000);
  }
  render() {
    return (
      <ScrollView style={styles.container} ref={(ref) => this.scrollView = ref}>
        <View style={styles.view}>
          <Text>{'MyComponent1'}</Text>
        </View>
        <View style={[styles.view, { backgroundColor: 'blue'}]} onLayout={this._onLayout}>
          <Text>{'MyComponent2'}</Text>
          <View style={[styles.view, , { backgroundColor: 'green'}]} onLayout={this._onLayout}>
            <Text>{'SubView1'}</Text>
            <View style={[styles.view, { backgroundColor: 'yellow'}]} onLayout={this._onLayout}>
              <Text>{'SubView2'}</Text>
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}
6
bennygenel