React Native bietet eine .measure(...)
Methode, die einen Rückruf entgegennimmt und ihn mit den Offsets und der Breite / Höhe einer Komponente aufruft:
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)
})
Beispiel...
Im Folgenden wird das Layout einer benutzerdefinierten Komponente nach dem Rendern berechnet:
class MyComponent extends React.Component {
render() {
return <View ref={view => { this.myComponent = view; }} />
}
componentDidMount() {
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)
})
}
}
Fehlerhinweise
Beachten Sie, dass die Komponente manchmal das Rendern nicht beendet, bevor sie componentDidMount()
aufgerufen wird. Wenn Sie als Ergebnis Nullen erhalten measure(...)
, setTimeout
sollte das Problem durch Einwickeln in a gelöst werden, dh:
setTimeout( myComponent.measure(...), 0 )
measure
hat bei mir nicht funktioniert. Musste Element Handle übergeben:const handle = findNodeHandle(this.refs.dropdown); UIManager.measure(handle, (x, y, ...) ...)
Sie können verwenden
onLayout
, um die Breite, Höhe und die Position einer Komponente relativ zur übergeordneten Position zum frühestmöglichen Zeitpunkt abzurufen:<View onLayout={event => { const layout = event.nativeEvent.layout; console.log('height:', layout.height); console.log('width:', layout.width); console.log('x:', layout.x); console.log('y:', layout.y); }} >
Im Vergleich zu verwenden ,
.measure()
wie in der akzeptierten Antwort gezeigt , hat dies den Vorteil , dass Sie nie Ihre Geige haben um Aufschub.measure()
Anrufe mit ,setTimeout
um sicherzustellen , dass die Messungen zur Verfügung stehen, aber der Nachteil , dass es nicht Ihnen Offsets zu dem relativ nicht geben ganze Seite, nur solche relativ zum übergeordneten Element.quelle
Ich musste die Position eines Elements in einer ListView finden und verwendete dieses Snippet, das wie folgt funktioniert
.offset
:const UIManager = require('NativeModules').UIManager; const handle = React.findNodeHandle(this.refs.myElement); UIManager.measureLayoutRelativeToParent( handle, (e) => {console.error(e)}, (x, y, w, h) => { console.log('offset', x, y, w, h); });
Dies setzt voraus, dass ich eine
ref='myElement'
auf meiner Komponente hatte.quelle
UIManager.measureLayoutRelativeToParent
in einensetTimeout
Anruf einschließen müssen, um zu verhindern, dass er fehlerhaft wird, wenn Sie diesen Code an einem Punkt im Lebenszyklus der Komponente ausführen, bevor er gerendert wurde. Beachten Sie auch, dass Sie für das moderne React Nativeimport { UIManager, findNodeHandler } from 'react-native'
eher die hier gezeigten Anforderungen als die hier gezeigten erfüllen möchten .UIManager
undfindNodeHandle
kann jetzt direkt aus "react-native" importiert werden. dhimport { UIManager, findNodeHandle} from "react-native"
Ich hatte ein ähnliches Problem und löste es, indem ich die obigen Antworten kombinierte
class FeedPost extends React.Component { constructor(props) { ... this.handleLayoutChange = this.handleLayoutChange.bind(this); } handleLayoutChange() { this.feedPost.measure( (fx, fy, width, height, px, py) => { console.log('Component width is: ' + width) console.log('Component height is: ' + height) console.log('X offset to page: ' + px) console.log('Y offset to page: ' + py) }) } render { return( <View onLayout={(event) => {this.handleLayoutChange(event) }} ref={view => { this.feedPost = view; }} > ...
Jetzt kann ich die Position meines feedPost-Elements in den Protokollen sehen:
08-24 11:15:36.838 3727 27838 I ReactNativeJS: Component width is: 156 08-24 11:15:36.838 3727 27838 I ReactNativeJS: Component height is: 206 08-24 11:15:36.838 3727 27838 I ReactNativeJS: X offset to page: 188 08-24 11:15:36.838 3727 27838 I ReactNativeJS: Y offset to page: 870
quelle
<View onLayout {(event) => {this.handleLayoutChange(event) }} ref={view => { this.feedPost = view; }} > ....
Stammansicht : Diese Hauptansicht ist this.feedPost.Dies scheint sich in der neuesten Version von React Native geändert zu haben, wenn refs zur Berechnung verwendet werden.
Deklarieren Sie Refs auf diese Weise.
<View ref={(image) => { this._image = image }}>
Und finden Sie den Wert auf diese Weise.
_measure = () => { this._image._component.measure((width, height, px, py, fx, fy) => { const location = { fx: fx, fy: fy, px: px, py: py, width: width, height: height } console.log(location) }) }
quelle
._component
in React Native 0.51 (aktuelle neueste Version, veröffentlicht 3 Tage bevor Sie diese Antwort veröffentlicht haben) nicht wiederholen . Ich bin mir nicht sicher, woher du das bekommst. für mich das erste Argument desref
Rückruf ist eine Komponente mit einem.measure
Verfahren.Animated.View
anstelle von verwendenView
.