Text in React-Native vertikal ausrichten

1. Verwenden Sie die Eigenschaften justifyContent und flex, um Text vertikal in der Mitte in React-Native auszurichten
2. Verwenden Sie die CSS-Eigenschaften alignItems und flex, um Text vertikal in der Mitte in React-Native auszurichten

In diesem Artikel lernen wir, den Text in React-native vertikal auszurichten. Mit den folgenden Methoden können wir jede Komponente in React-native ausrichten, nicht nur Texte.

Verwenden Sie die Eigenschaften justifyContent und flex, um Text vertikal in der Mitte in React-Native auszurichten

Benutzer können das CSS jeder Komponente anpassen und vertikal ausrichten. Wir können die CSS-Eigenschaften justifyContent und flex verwenden, um den Text vertikal mittig oder unten oder an einer anderen Position auszurichten.

Im folgenden Beispiel haben wir den Container mit der Komponente View erstellt, die die Komponente Text als untergeordnete Komponente enthält. Außerdem haben wir den Stil Mitte erstellt und auf die Komponente Ansicht angewendet.

Im Style center haben wir flex: 1 hinzugefügt, das darstellt, wie die Komponente View wachsen soll. Da wir nur eine einzige View-Komponente mit der CSS-Eigenschaft flex haben, nimmt sie 100 % Höhe an, und justifyContent: center zentriert den Inhalt der View-Komponente, indem sie ihre Größe entsprechend dem flex berücksichtigt. Eigentum.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.center}>
      <Text>This is vertically Center Text.</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
  },
});

Ausgang:

In der obigen Ausgabe können Benutzer sehen, dass der Text vertikal zentriert ausgerichtet ist.

Verwenden Sie die CSS-Eigenschaften alignItems und flex, um Text vertikal in der Mitte in React-Native auszurichten

Als CSS-Property justifyContent erlaubt uns alignItems auch, den Text vertikal zu zentrieren. Wenn wir den Wert center für die CSS-Eigenschaft alignItems verwenden, werden die Texte vertikal zentriert ausgerichtet.

Benutzer müssen die Eigenschaft auch mit der CSS-Eigenschaft alignItems verwenden, um festzulegen, wie der Container wachsen soll. Vereinfacht gesagt definiert die Eigenschaft flex die Höhe der Komponente und entsprechend der Höhe richtet die Eigenschaft alignItems den Text aus.

Im folgenden Beispiel haben wir die beiden Text-Komponenten erstellt und das CSS flexDirection: ‘row’ auf die übergeordnete View-Komponente angewendet, um alle Text-Komponenten in einer einzigen Zeile anzuzeigen.

Außerdem haben wir in der übergeordneten Komponente View den Stil flex:1 angewendet, der die Höhe der Komponente auf 100 % setzt, und alignItems: center, um die Texte vertikal zu zentrieren.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "center", flex:1, }}>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>Hi</Text>{" "}
      </View>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>There</Text>{" "}
      </View>
    </View>
  );
}

Ausgang:

Wenn Benutzer den Text unten ausrichten möchten, müssen sie die Werte der CSS-Eigenschaft alignItems auf flex-end und den oberen Änderungswert auf flex-start ändern.

Um den Text unten auszurichten, können Benutzer dem folgenden Beispielcode folgen.

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "flex-end", flex: 1 }}>
      <Text style={{ fontSize: 30 }}>Text at bottom</Text>{" "}
    </View>
  );
}

Ausgang:

In der obigen Ausgabe können Benutzer sehen, dass der Text unten ausgerichtet wird, da wir den Wert von alignItems auf flex-end gesetzt haben.

Benutzer haben in diesem Artikel verschiedene Methoden zum vertikalen Ausrichten von Texten kennengelernt. Benutzer können die CSS-Eigenschaft justifyContent oder alignItems mit der CSS-Eigenschaft flex verwenden.

Hier haben wir nur die Eigenschaft flex verwendet, um die Containerhöhe festzulegen. Benutzer können auch versuchen, die Höhe manuell einzustellen.