Comment afficher la case à cocher en réactif ?

Checkbox est un composant courant que nous utilisons souvent sur l'interface utilisateur. Nous en avons des sympas Comment afficher la case à cocher en réactif.

Le package principal de React-Native ne prend pas en charge les cases à cocher, vous devez en installer une progiciel pour l'utiliser.

Les packages suivants doivent être installés pour afficher la case à cocher -

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

Le composant de base de la case à cocher est le suivant -

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

Voyons maintenant quelques propriétés importantes de la case à cocher -

Props	Description
statut	La valeur qui peut être définie pour donner le statut est Sélectionné, non sélectionné et non défini.
Disabled	La valeur est un booléen. Disponible pour Activer/désactiver la case à cocher.
onPress	Fonction qui sera appelée lorsque le bouton est enfoncé La case est cochée.
Color	La couleur spécifiée pour la case à cocher
uncheckColor< /td>	La couleur de la case non cochée

Il s'agit d'un simple affichage de case à cocher -

useState est utilisé pour définir l'état coché et non coché de la case à cocher : afficher Ci-dessous - le statut

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

est enregistré dans la variable vérifiée et la méthode setChecked est utilisée Mettez-le à jour.

Lorsque l'utilisateur coche/décoche la case, le statut coché sera mis à jour comme indiqué dans l'image Ci-dessous -

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

Le code complet est le suivant -

Exemple

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;

sortie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!