React Native - 如何从 ScrollView 获取视图的 Y 偏移值？

Question

我正在尝试获取视图的滚动位置。但是 Y 偏移到 page 的值与视图的位置无关。

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; }}>

我已经检查了 SubView2 视图在 onScroll 方法上的确切位置。但是确实匹配到了measure value。我可以弄清楚 measure value 是错误的。

是不是ScrollView层级问题？

Answer 1

View 组件有一个名为 onLayout 的属性。您可以使用此属性获取该组件的位置。

onLayout

Invoked on mount and layout changes with:
{nativeEvent: { layout: {x, y, width, height}}}
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.

更新

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

React Native - 如何从 ScrollView 获取视图的 Y 偏移值？

React Native - How to get Y Offset Value of a view from ScrollView?

javascript

scrollview

uiscrollview

react-native