Wie zeige ich das Kontrollkästchen in Reactnative an?

Checkbox ist eine häufige Komponente, die wir häufig auf der Benutzeroberfläche verwenden. Wir haben einige coole Exemplare So zeigen Sie das Kontrollkästchen in Reactnative an.

Das Core-React-Native-Paket unterstützt keine Kontrollkästchen, Sie müssen eines installieren Softwarepaket, um es zu verwenden.

Die folgenden Pakete müssen installiert sein, um das Kontrollkästchen anzuzeigen -

npm install --save-dev react-native-paper

Die grundlegende Kontrollkästchenkomponente lautet wie folgt -

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

Jetzt sehen wir uns einige wichtige Eigenschaften des Kontrollkästchens an -

Props th>	Beschreibung
Status	Der Wert, der zur Angabe des Status festgelegt werden kann, ist Aktiviert, deaktiviert und undefiniert.
Disabled	Der Wert ist ein boolescher Wert. Verfügbar für Kontrollkästchen aktivieren/deaktivieren.
onPress	Funktion, die aufgerufen wird, wenn die Taste gedrückt wird Das Kontrollkästchen ist aktiviert.
Farbe	Die für das Kontrollkästchen angegebene Farbe
uncheckColor	Die Farbe des deaktivierten Kontrollkästchens

Dies ist eine einfache Kontrollkästchenanzeige –

useState wird verwendet, um den aktivierten und nicht aktivierten Status des Kontrollkästchens festzulegen: Anzeige Unten: Der

const [checked, setChecked] = React.useState(false);

-Status wird in der geprüften Variablen gespeichert und die setChecked-Methode wird verwendet Aktualisieren Sie es.

Wenn der Benutzer das Kontrollkästchen aktiviert/deaktiviert, wird der aktivierte Status wie im Bild gezeigt aktualisiert Unten -

onPress={() => {
   setChecked(!checked);
}}

Der vollständige Code lautet wie folgt -

Beispiel

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
   const [checked, setChecked] = React.useState(false);
   return (
      <SafeAreaView style={styles.container}>
         <Checkbox
            status={checked ? &#39;checked&#39; : &#39;unchecked&#39;}
            onPress={() => {
               setChecked(!checked);
            }}
            color={&#39;green&#39;}
            uncheckColor={&#39;red&#39;}
         />
      <Text>Checkbox</Text>
      </SafeAreaView>
   );
};
const styles = StyleSheet.create({
   container: {
      flex: 1,
      justifyContent: &#39;center&#39;,
      alignItems: &#39;center&#39;
   },
});
export default MyComponent;

Ausgabe

Das obige ist der detaillierte Inhalt vonWie zeige ich das Kontrollkästchen in Reactnative an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!