Bagaimana untuk menunjukkan kotak semak dalam reactnative?

Kotak semak ialah komponen biasa yang sering kami gunakan pada UI. Kami mempunyai beberapa yang keren Bagaimana untuk memaparkan kotak semak dalam reactnative.

Pakej inti tindak balas asli tidak menyokong kotak pilihan, anda perlu memasang satu pakej perisian untuk menggunakannya.

Pakej berikut mesti dipasang untuk memaparkan kotak semak-

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

Komponen kotak semak asas adalah seperti berikut-

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

Sekarang mari kita lihat Beberapa perkara penting sifat pada kotak pilihan -

#🎜🎜🎜##🎜 #statusNilai yang boleh ditetapkan untuk memberikan status ialah Dipilih, tidak dipilih dan tidak ditentukan. Dilumpuhkan Nilai ialah boolean. Tersedia untuk Dayakan/lumpuhkan kotak semak. onPressFungsi yang akan dipanggil apabila butang ditekan Kotak semak ditandakan. WarnaWarna yang diberikan pada kotak semak #🎜# nyahtandakan warna ##🎜🎜 🎜#useState digunakan untuk menetapkan kotak semak yang ditanda atau dinyahtanda Status: Tunjukkan Di bawah -

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

status disimpan dalam pembolehubah yang diperiksa dan kaedah setChecked digunakan Kemas kini.

Props	Penerangan
	Warna kotak pilihan yang tidak ditanda
< /td>Ini ialah paparan kotak semak mudah -

Apabila pengguna menanda/menyahtanda kotak semak, status yang ditanda akan dikemas kini seperti yang ditunjukkan dalam gambar Di bawah -

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

Kod lengkap adalah seperti berikut -

Contoh

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;

Output

#🎜 🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan kotak semak dalam reactnative?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!