Text in React-Native ausrichten

1. Richten Sie Texte in React-Native zentriert aus
2. Texte rechtsbündig in React-Native ausrichten

In diesem Artikel erfahren Sie, wie Sie Texte in React-native an verschiedenen Positionen ausrichten, z. B. links, rechts und zentriert. Während der Entwicklung der mobilen Anwendung müssen Entwickler häufig Elemente ausrichten, um eine attraktive Benutzeroberfläche zu erstellen.

Richten Sie Texte in React-Native zentriert aus

Um die Texte in React-native auszurichten, benötigen wir einfaches CSS. Wenn wir einer Komponente textAlign: center hinzufügen, werden die Elemente an der Mitte ausgerichtet.

Benutzer können der folgenden Syntax folgen, um textAlign: center zu einer beliebigen Komponente hinzuzufügen.

<View style={styles.container}>
{/* Code for component */}
</View>
// style to center the itemsconst styles = StyleSheet.create({
  container: {
    textAlign: "center"
  },
});

Im folgenden Beispiel haben wir einige Text-Komponenten erstellt und sie innerhalb der einzelnen View-Komponente hinzugefügt. Wir haben den container-Stil auf die View-Komponente angewendet.

Im container-Stil haben wir die CSS-Eigenschaft textAlign: center hinzugefügt, um den Inhalt der View-Komponente zu zentrieren, die Benutzer in der Ausgabe sehen können.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Welcome to DelftStack!</Text>
      <Text>Welcome to DelftStack!</Text>
      <Text>Welcome to DelftStack!</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    backgroundColor: "#fff",
    textAlign: "center"
  },
});

Ausgang:

Texte rechtsbündig in React-Native ausrichten

Die einfachste Möglichkeit, die Texte in React-native rechts auszurichten, ist die Verwendung der CSS-Eigenschaft textAlign: Right. Außerdem werden wir einige andere Möglichkeiten zur Rechtsausrichtung von Text besprechen.

Im folgenden Beispiel haben wir die CSS-Eigenschaft textAlign: right für die Komponente Text verwendet und Benutzer können in der Ausgabe sehen, dass der Text rechtsbündig ausgerichtet ist.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View>
      <Text>Normal Postion of the text.</Text>
      <Text style={styles.text}>Text is at Right</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    textAlign: "right"
  },
});

Ausgang:

Außerdem können Benutzer die CSS-Eigenschaft alignSelf verwenden, um den Text richtig auszurichten. Wenn wir den Wert flex-end als Wert der CSS-Eigenschaft alignSelf verwenden, wird der Text rechtsbündig ausgerichtet.

Benutzer können die folgende Syntax sehen, um die CSS-Eigenschaft alignSelf zu verwenden.

<View>
   <Text style={{alignSelf: 'flex-end'}}>This is a Demo Text!</Text>
</View>

Jetzt werden wir lernen, einen Teil des Textes rechts und einen Teil links von einer einzelnen Zeile auszurichten.

Im folgenden Beispiel haben wir die Komponente View erstellt und die flexDirection: row als CSS-Eigenschaft hinzugefügt, um ihre untergeordnete Komponente in einer einzelnen Zeile auszurichten. In den untergeordneten Komponenten haben wir je nach Bedarf die CSS-Eigenschaft textAlign hinzugefügt, und so können wir einen Teil des Textes rechts und einen Teil links in einer einzigen Zeile ausrichten.

Beispielcode:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (

<View style={{flex: 1, flexDirection: 'row'}}>
  {/* align left*/}
  <View style={{flex: 1}}>
    <Text>Left Text</Text>
  </View>
  {/* align right*/}
  <View>
    <Text style={{textAlign: 'right'}}>Right Text</Text>
  </View>
</View>
  );
}

Ausgang:

Im Allgemeinen müssen wir einen Text nicht linksbündig ausrichten, da dies standardmäßig verwendet wird. Wenn Benutzer den Text dennoch linksbündig ausrichten möchten, können sie die CSS-Eigenschaft textAlign: left in React Native verwenden.

In diesem Artikel haben wir gelernt, Text links und rechts auszurichten. Außerdem haben wir gelernt, den Text einer einzelnen Komponente oder einer einzelnen Zeile auszurichten, was sehr nützlich ist, wenn ein Entwickler den Text gefolgt vom Bild in einer einzelnen Zeile platzieren möchte.