Stellen Sie die Rahmenfarbe in React-Native ein

1. Stellen Sie die Rahmenfarbe mit dem StyleSheet in React-Native ein
2. Stellen Sie die Rahmenfarbe mit dem Stil-Prop in React-Native ein

In diesem Artikel erfahren Sie, wie Sie die Rahmenfarbe in einer React-native-Anwendung festlegen und verwenden. Der Rand ist die äußere Schicht eines Elements, das mit verschiedenen Randbreiten und -farben angepasst werden kann.

Wir können sogar die Farben für alle vier Seiten eines Elements festlegen. Das React-Native verwendet die Komponente Text, um beliebigen Text in der Anwendung anzuzeigen.

In diesem Artikel wird React-Native verwendet, um den Rahmen und die Rahmenfarbe eines Textelements zu entwickeln. Es gibt verschiedene Möglichkeiten, die Farbe der Umrandung im react-native festzulegen; Wir werden die beliebtesten Methoden dafür besprechen.

Stellen Sie die Rahmenfarbe mit dem StyleSheet in React-Native ein

Das StyleSheet muss aus dem React-Native-Paket importiert werden. Es wird verwendet, um Stile für verschiedene reaktiv-native Elemente zu erstellen.

Damit können wir unsere benutzerdefinierten Stile erstellen und sie entsprechend zu unserer Anwendung hinzufügen.

Syntax des StyleSheets:

const styles = StyleSheet.create({
  style1: {
    // Put your style here
    // For example:
    backgroundColor: '#ffffff',
    color: '#000000'
  },
  style2: {
    // Put your style here
    // For example:
    width: '100%',
  },
});

Nachdem wir das StyleSheet in unserer reaktiven Anwendung deklariert haben, müssen wir einen Stil mit den Eigenschaften border und border-color erstellen und ihn in einem Text verwenden.

Im folgenden Beispiel verwenden wir das StyleSheet von React-Native, um die Rahmenfarbe einer Text-Komponente festzulegen. Zuerst haben wir das StyleSheet importiert und mehrere Stile mit den Namen redBorder, blueBorder und greenBorder erstellt.

Jeder Stil enthält einige Stile, wie etwa borderWidth und borderColor. Dann haben wir drei verschiedene Text-Komponenten erstellt und unsere erstellten Stile in sie eingefügt.

Zum Schluss werden zur besseren Visualisierung noch padding und margins hinzugefügt.

import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.redBorder}>It has red border color</Text>
      <Text style={styles.blueBorder}>It has blue border color</Text>
      <Text style={styles.greenBorder}>It has green border color</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  redBorder: {
    borderWidth: 1,
    borderColor: 'red',
    padding: 10,
    margin: 5
  },
  blueBorder: {
    borderWidth: 1,
    borderColor: 'blue',
    padding: 10,
    margin: 5
  },
  greenBorder: {
    borderWidth: 1,
    borderColor: 'green',
    padding: 10,
    margin: 5
  }
});

Ausgang:

In der obigen Ausgabe können Benutzer drei Texte mit drei Rahmenfarben sehen: rot, blau und grün.

Stellen Sie die Rahmenfarbe mit dem Stil-Prop in React-Native ein

Das Stil-Prop wird verwendet, um Stile für verschiedene Elemente von React-Native festzulegen. Es nimmt ein Objekt, das die Stile enthält, die der Benutzer in der Komponente anwenden möchte.

Um beispielsweise die Rahmenfarbe mit dem Stilprop anzugeben, müssen wir den Wert Stilprop angeben, der unsere gewünschte Rahmenfarbe und Rahmenbreite enthält.

Im folgenden Beispiel verwenden wir die Stilstütze der Text-Komponente von React-Native, um die Rahmenfarbe dieser Komponente festzulegen. Zuerst müssen wir die Text-Komponenten erstellen, also haben wir in diesem Beispiel zwei Text-Komponenten erstellt.

Jede Komponente verwendet das style prop, und im style prop haben wir die zu setzende borderWidth und die borderColor definiert. Das padding und margin dienen der besseren Visualisierung des Inhalts.

import { StyleSheet, Text, View } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ borderWidth: 2, borderColor: 'yellow', padding: 10, margin: 5 }}>Yellow border color with style prop</Text>
      <Text style={{ borderWidth: 2, borderColor: 'purple', padding: 10, margin: 5 }}>Purple border color with style prop</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Ausgang:

In der obigen Ausgabe sehen Benutzer zwei Texte mit zwei verschiedenen Randfarben, gelb und lila, die von der Stilstütze eingerichtet wurden.

In diesem Artikel haben wir gelernt, verschiedene Randfarben im React-Native festzulegen. Abgesehen von den in diesem Artikel beschriebenen Methoden gibt es viele andere Möglichkeiten, die Rahmenfarbe festzulegen, aber dies sind die einfachsten und beliebtesten Methoden, um den Rahmen einer Komponente einzufärben.