So finden Sie x,y-position der Komponente Reagieren nativen

Wie finde ich die x,y-position, wo ein element auf dem Bildschirm positioniert, ich bin mit React Native v0.14. Ich habe Folgendes versucht, aber es sagt, Maßnahme ist nicht eine Funktion.

componentDidMount() {
    setTimeout(this.measurePosition);
  },
measurePosition() {
    this.refs.q.measure((a, b, width, height, px,py ) => console.log(width))
},
  • Gute Frage. Ich bin mir nicht sicher, was die Antwort ist, aber ich würde damit beginnen, dieses blog, wo ich weiß, er macht eine Menge mit x,y coords, so seine Beispiele liefern Ihnen Antworten browniefed.com
InformationsquelleAutor Jonathan Lockley | 2015-10-30
  1. 1

    Option1:

    Können Sie die NativeMethodsMixin. Stellen Sie sicher, dass Sie Hinzugefügt haben, Mixins, um Ihre Klasse

    var NativeMethodsMixin = require('NativeMethodsMixin')
...
var MyComponent = React.createClass({
  mixins: [NativeMethodsMixin]
...
componentDidMount: function(){
  this.refs.element.measure((x,y,w,h,pX,pY) => console.log("dets"))
}

    Option 2

    Können Sie mithilfe der onLayout-Eigenschaft auf Ansichten. Es ist verfügbar auf den meisten Komponenten.

    render:function(){
... 
<View onLayout = {this.onLayout} />
...
},
onLayout:function(event){
  console.log(event.nativeEvent.layout)
}

    Erhalten Sie die x,y, Breite und Höhe

    • Dies gab mir die Höhe und Breite meiner Ansicht Komponente, die ist auch nützlich, aber es immer noch nicht geben Sie mir die offset-position von meiner Sicht.
    • Tut mir Leid, aber ich verstehe nicht, wie das ist andere form y
    • Das Y kommt zurück mit 0, ich glaube nicht, dass es das finden der Y-von den Eltern, also wo mein element passt in den Körper/Dokument
    • In diesem Fall wird die NativeMethodsMixin kommen praktisch. Aktualisiert die Antwort zu reflektieren, die gleiche
    InformationsquelleAutor Nishanth Shankar
  2. 0

    Können Sie so etwas wie
    1. Holen Sie sich die browser DOM-element mit (ReactDOM.findDOMNode())
    2. Verwenden Sie die Elemente, getBoundingClientRect()
    3. Sie haben oben, Links, unten und rechts coords

    dies kann auch nützlich sein, Abrufen der position (X,Y) eines HTML-Elements

    • die Frage war über reagieren nativen, nicht reagieren, dom
    InformationsquelleAutor Davet
Schreibe einen Kommentar