web-dev-qa-db-fra.com

React Native - Comment obtenir la valeur de décalage Y d'une vue à partir de ScrollView?

J'essaie d'obtenir la position de défilement d'une vue. Mais la valeur pour décalage Y à la page qui n'est pas liée à la position de la vue.

Hiérarchie ScrollView:

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

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

J'ai vérifié la position exacte d'un SubView2 vue sur la méthode onScroll. Mais correspondait avec le measure value. Je peux comprendre le measure value est faux.

Est-ce un problème de hiérarchie ScrollView?

javascriptreact-nativeuiscrollviewscrollview
9
Balasubramanian

Le composant View possède une propriété appelée onLayout . Vous pouvez utiliser cette propriété pour obtenir la position de ce composant.

onLayout

Appelé sur les modifications de montage et de disposition avec:

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

Cet événement est déclenché immédiatement une fois la disposition calculée, mais la nouvelle disposition peut ne pas encore être reflétée sur l'écran au moment de la réception de l'événement, en particulier si une animation de disposition est en cours.

Mise à jour

onLayout prop donne une position au composant parent. Cela signifie trouver la position de SubView2, vous devez obtenir le total de tous les composants parents (MyComponent2 + SubView1 + SubView2).

Échantillon 

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