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 -

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!