Ich versuche mit React Native ein Layout wie unten zu erstellen.
Wie gebe ich die Position von B relativ zu A an?
Mit iOS Interface Builder und automatischen Einschränkungen kann dies sehr explizit durchgeführt werden und ist ein Kinderspiel. Es ist nicht so offensichtlich, wie man dies mit React Native erreichen könnte.
react-native
Fatuhoku
quelle
quelle
zIndex: 100
"schwebende Ansicht" hat für mich in meiner Situation funktioniert.zIndex:10
und einer negativen MargemarginTop:-15
sollte Ihnen das bringen, was Sie wollen. Position: 'Absolut' könnte Dinge auf größeren Bildschirmen durcheinander bringen, dies berücksichtigen, möglicherweise vermeiden.Antworten:
Fügen Sie der "schwebenden" Ansicht Folgendes hinzu
Möglicherweise müssen Sie auch einen oberen und einen linken Wert für die Positionierung hinzufügen
Siehe dieses Beispiel: https://rnplay.org/apps/OjzcxQ/edit
quelle
view B
nachkommtview A
, da es momentan keinezIndex
Unterstützung gibt .Die oben genannten Lösungen haben bei mir nicht funktioniert. Ich habe es gelöst, indem ich eine Ansicht mit der gleichen Hintergrundfarbe wie das übergeordnete Element erstellt und einen negativen Rand hinzugefügt habe, um das Bild nach oben zu verschieben.
und ich habe das folgende Ergebnis erhalten.
quelle
Sie können
zIndex
damit eine Ansicht über einer anderen platzieren. Es funktioniert wie die CSS-Z-Index-Eigenschaft - Komponenten mit einem größerenzIndex
Wert werden oben gerendert.Sie können sich darauf beziehen: Layout Requisiten
Snippet:
quelle
Sie können dies verwenden
OverlayContainer
. Der Trick ist,absolute
mit100%
Größe zu verwenden. Überprüfen Sie unten ein Beispiel:quelle
height: 100,
und nichtheight: '100%',
?front
Ansicht eineAnimated.View
; Ich musstealignItems: 'center' from
styles.center` entfernen , sonst würde es nicht angezeigt.quelle
Sie können das
react-native-view-overflow
Plugin verwenden, um eine Ansicht über eine andere zu platzieren. Es funktioniert wie die CSS-Z-Index-Eigenschaft.quelle
Der einfachste Weg, dies zu erreichen, ist eine negative Marge.
const deviceWidth = RN.Dimensions.get('window').width a: { alignItems: 'center', backgroundColor: 'blue', width: deviceWidth, }, b: { marginTop: -16, marginStart: 20, },
quelle