Reagieren Sie auf die native absolute Position

Obwohl alles in React Native standardmäßig auf ein relatives gesetzt ist, bezieht sich die absolute Positionierung immer auf das übergeordnete Element. Position in React Native ist vergleichbar mit Standard-CSS.

Reagieren Sie auf die native absolute Position

Legen Sie für das untergeordnete Element eine absolute Position fest, wenn Sie es um eine bestimmte Anzahl logischer Pixel relativ zu seinem übergeordneten Element platzieren möchten.

Sehen wir uns ein Beispiel an.

<>
  <View
    style={{
      marginTop: 40,
      height: 100,
      backgroundColor: "#ccc",
    }}
  >
    <View
      style={{
        height: 100,
        width: 100,
        backgroundColor: "red",
        position: "absolute",
        right: 0,
        bottom: 0,
      }}
    />
  </View>
</>

Der obige Code zeigt eine Hauptkomponente Ansicht; Innerhalb der Hauptkomponente gibt es eine untergeordnete view-Komponente.

Wenn wir die übergeordnete Komponente ändern, bleibt die untergeordnete Komponente in der übergeordneten Komponente.

Ausgang:

Hier in diesem Screenshot sehen Sie zwei Komponenten, d. h. eine mit grauer Farbe, eine mit roter Farbe. Die graue Farbkomponente ist die übergeordnete Komponente, während die rote Komponente die untergeordnete Komponente ist.

Wenn wir Änderungen an der übergeordneten Komponente vornehmen (z. B. die Höhe auf 100 % setzen, d. h. Flex = 1), bleibt die untergeordnete Komponente in der übergeordneten Komponente.

<>
<View style={{
        flex: 1,
        marginTop: 40,
        backgroundColor: '#ccc',

      }}>
        <View style={{
          height: 100,
          width: 100,
          backgroundColor: 'red',
          position: 'absolute',
          right: 0,
          bottom: 0,

        }} />
      </View>

    </>

Ausgang: