रिएक्टिव नेटिव - मोडल

इस अध्याय में, हम आपको दिखाएंगे कि कैसे प्रतिक्रियाशील मूल में मोडल घटक का उपयोग करें।

आइए अब एक नई फ़ाइल बनाते हैं: ModalExample.js

हम अंदर तर्क रखेंगे ModalExample। हम रन करके प्रारंभिक अवस्था को अपडेट कर सकते हैंtoggleModal।

चलाने के बाद प्रारंभिक स्थिति को अद्यतन करने के बाद toggleModal, हम सेट करेंगे visibleहमारे मोडल को संपत्ति। राज्य बदलने पर यह प्रस्ताव अपडेट किया जाएगा।

onRequestClose Android उपकरणों के लिए आवश्यक है।

App.js

import React, { Component } from 'react'
import WebViewExample from './modal_example.js'

const Home = () => {
   return (
      <WebViewExample/>
   )
}
export default Home;

modal_example.js

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, StyleSheet}

from 'react-native'
class ModalExample extends Component {
   state = {
      modalVisible: false,
   }
   toggleModal(visible) {
      this.setState({ modalVisible: visible });
   }
   render() {
      return (
         <View style = {styles.container}>
            <Modal animationType = {"slide"} transparent = {false}
               visible = {this.state.modalVisible}
               onRequestClose = {() => { console.log("Modal has been closed.") } }>
               
               <View style = {styles.modal}>
                  <Text style = {styles.text}>Modal is open!</Text>
                  
                  <TouchableHighlight onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     
                     <Text style = {styles.text}>Close Modal</Text>
                  </TouchableHighlight>
               </View>
            </Modal>
            
            <TouchableHighlight onPress = {() => {this.toggleModal(true)}}>
               <Text style = {styles.text}>Open Modal</Text>
            </TouchableHighlight>
         </View>
      )
   }
}
export default ModalExample

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
      backgroundColor: '#ede3f2',
      padding: 100
   },
   modal: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#f7021a',
      padding: 100
   },
   text: {
      color: '#3f2949',
      marginTop: 10
   }
})

हमारी शुरुआती स्क्रीन इस तरह दिखाई देगी -

यदि हम बटन पर क्लिक करते हैं, तो मोडल खुल जाएगा।