React Native - Как получить значение Y Offset для представления из ScrollView? - PullRequest
Новая
       21

React Native - Как получить значение Y Offset для представления из ScrollView?

0 голосов
/ 01 июня 2018

Я пытаюсь получить позицию прокрутки вида.Но значение для 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; }}>

Я проверил точную позициюSubView2 просмотр метода onScroll.Но совпадал с measure value.Я могу понять, что measure value не так.

Это проблема иерархии ScrollView?

1 Ответ

0 голосов
/ 03 июня 2018

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