Menjelaskan cara tetingkap modal berfungsi dalam React Native

Komponen modal membantu memaparkan paparan kandungan di atas kandungan UI.

Komponen modal asas adalah seperti berikut -

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>

Untuk menggunakan komponen modal, anda perlu mengimportnya terlebih dahulu seperti yang ditunjukkan di bawah -

import { Modal } from "react-native";

Sifat asas tetingkap modal adalah seperti berikut -

<Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
      </View>
   </View>
</Modal>

setModalVisiblitity akan mengemas kini pembolehubah isVisible daripada palsu kepada benar dan sebaliknya.

Sr. Tiada	Props & Penerangan
1	animationType Harta ini mengendalikan animasi yang dipaparkan Tingkap modal. Ia adalah penghitungan dengan tiga nilai - Slaid, Pudar dan Tiada.
2	onDismiss Harta ini menerima fungsi yang akan dipanggil Apabila tetingkap modal ditutup.
3	onOrientationChange Fungsi panggil balik dipanggil apabila peranti dimulakan Apabila tetingkap modal menukar orientasi tunjuk.
4	onShow fungsi diluluskan sebagai nilai prop yang dipanggil Apabila menunjukkan tetingkap modal.
5	presentationStyle Atribut ini mengendalikan paparan kotak modal tingkap. Nilai yang tersedia ialah skrin penuh, pageSheet, formsheet dan overFullScreen.
6	Telus Prop ini akan memutuskan untuk memberikan pandangan atau isian yang telus Pandangan keseluruhan tetingkap modal.
7	boleh dilihatHarta ini akan menentukan sama ada tetingkap modal anda Nampak atau tak nampak. . Pilihan ialah Slaid, Pudar dan Tiada. Dalam contoh berikut, kami ingin memaparkan tetingkap modal mudah dengan teks dan butang seperti yang ditunjukkan di bawah - import { Modal } from "react-native"; isVisible pembolehubah diperuntukkan kepada sifat yang boleh dilihat. Lalai kepada palsu, iaitu tetingkap modal tidak akan ditunjukkan secara lalai. Permulaan sifat isVisible adalah seperti berikut -

Butang tutup yang ditakrifkan dalam komponen memanggil setModalVisibility(false), yang akan menjadikan isVisible palsu dan tetingkap modal akan hilang.

Untuk menunjukkan tetingkap modal,

ada butang di luar komponen memanggil setModalVisiblitity(true) seperti yang ditunjukkan di bawah -

const [isVisible, setModalVisiblility] = useState(false);

Ini ialah kod berfungsi untuk menunjukkan/menyembunyikan tetingkap modal.

<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
            </View>
         </View>
      </Modal>
      <Button title="Click Me" onPress={() => {
         setModalVisiblility(true);
      }}
   />
</View>

output

Atas ialah kandungan terperinci Menjelaskan cara tetingkap modal berfungsi dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!