Menjelaskan cara tetingkap modal berfungsi dalam React Native-tutorial js-php.cn

Menjelaskan cara tetingkap modal berfungsi dalam React Native

PHPz

Lepaskan： 2023-08-24 15:01:01

ke hadapan

838 orang telah melayarinya

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>

Salin selepas log masuk

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

import { Modal } from "react-native";

Salin selepas log masuk

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>

Salin selepas log masuk

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

Sr. Tiada	Props & Penerangan
1	< strong>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 dilihat < p>Harta 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"; Salin selepas log masuk Salin selepas log masuk 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);

Salin selepas log masuk

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>

Salin selepas log masuk

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!