প্রতিক্রিয়া নেটিভ-এ মডেল উইন্ডোর কাজ ব্যাখ্যা কর

মডেল উপাদান আপনার UI বিষয়বস্তুর উপরে একটি বিষয়বস্তু দৃশ্য প্রদর্শন করতে সাহায্য করে।

মৌলিক মডেল উপাদান নিম্নরূপ -

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

মোডাল কম্পোনেন্টের সাথে কাজ করার জন্য আপনাকে প্রথমে এটি নিম্নরূপ −

import { Modal } from "react-native";

মডেল উইন্ডোর মৌলিক বৈশিষ্ট্যগুলি নিম্নরূপ -

উদাহরণ 1:মডেল উইন্ডো প্রদর্শন দেখানো হচ্ছে

মোডাল কম্পোনেন্টের সাথে কাজ করার জন্য, আপনাকে প্রথমে এটি নিম্নরূপ −

import { Modal } from "react-native";

একটি মডেল উইন্ডো দেখানোর জন্য, আপনি এটিতে যে অ্যানিমেশনটি রাখতে চান তা নির্ধারণ করতে পারেন৷ বিকল্পগুলি হল স্লাইড, ফেইড এবং কিছুই নয়। নীচের উদাহরণে আমরা টেক্সট এবং বোতাম সহ একটি সাধারণ মডেল উইন্ডো প্রদর্শন করতে চাই যা নীচে দেখানো হয়েছে −

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

isVisible ভেরিয়েবলটি দৃশ্যমান সম্পত্তিতে বরাদ্দ করা হয়েছে। এটি ডিফল্টরূপে মিথ্যা অর্থাৎ মোডাল উইন্ডোটি ডিফল্টরূপে দেখানো হবে না। −

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

সেটমোডালভিসিবিলিটি isVisible ভেরিয়েবলকে মিথ্যা থেকে সত্যে এবং এর বিপরীতে আপডেট করবে৷

উপাদানের ভিতরে সংজ্ঞায়িত ক্লোজ বোতামটি সেটমোডালভিসিবিলিটিকে কল করে

মোডাল উইন্ডো প্রদর্শন করার জন্য উপাদানের বাইরে একটি বোতাম রয়েছে যা নীচে দেখানো হিসাবে সেটমোডালভিসিবিলিটি(সত্য) কল করে -

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

এখানে কার্যকারী কোড যা মডেল উইন্ডোটি দেখায়/লুকাবে।

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
   const [isVisible, setModalVisiblility] = useState(false);
   return (
      <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>
   );
};
const styles = StyleSheet.create({
   centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
   },
   myModal: {
      width:200,
      height:200,
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
         width: 0,
         height: 2
      },
      shadowOpacity: 0.30,
      shadowRadius: 4,
      elevation: 5
   },
   modalText: {
      marginBottom: 20,
      textAlign: "center"
   },
   modalButton: {
      marginBottom: 50,
   }
});
export default App;

আউটপুট