Bagaimana untuk menunjukkan kotak semak dalam reactnative?-tutorial js-php.cn

Bagaimana untuk menunjukkan kotak semak dalam reactnative?

WBOY

Lepaskan： 2023-08-27 22:57:01

ke hadapan

1214 orang telah melayarinya

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

Salin selepas log masuk

Komponen kotak semak asas adalah seperti berikut-

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

Salin selepas log masuk

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);

Salin selepas log masuk

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);
}}

Salin selepas log masuk

Kod lengkap adalah seperti berikut -

Contoh

import * as React from &#39;react&#39;;
import { StyleSheet, Text, SafeAreaView } from &#39;react-native&#39;;
import { Checkbox } from &#39;react-native-paper&#39;;
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;

Salin selepas log masuk

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!