۲۹
فروردین

جلسه ۲۱ : کامپوننت Modal در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در این جلسه کامپوننت Modal در React Native رو مورد بررسی قرار خواهیم داد و نحوه استفاده از کامپوننت مودال در React Native رو داریم .

کامپوننت Modal در React Native

در این فصل ما به شما نحوه استفاده از مولفه مودال در React Native را نشان خواهیم داد.
اکنون یک فایل جدید ایجاد می کنیم: ModalExample.js
ما Logic را در ModalExample قرار خواهیم داد. ما می توانیم با استفاده از toggleModal وضعیت اولیه را به روزرسانی کنیم.
پس از به روز رسانی وضعیت اولیه با استفاده از toggleModal، قابل مشاهده بودن یا visible را در modal تنظیم می کنیم. این prop زمانی که وضعیت تغییر می کند، به روز می شود.
onRequestClose برای دستگاه های آندروید مورد نیاز است.

App.js

مثال :

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

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

import React, { Component } from 'react'

import WebViewExample from './modal_example.js'

const Home = () => {

return (

)

}

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

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 (

<Modal animationType = {"slide"} transparent = {false}

visible = {this.state.modalVisible}

onRequestClose = {() => { console.log("Modal has been closed.") } }>

<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

}

})

صفحه شروع ما به این شبیه خواهد بود.

Modal در فریم ورک React Native

اگر ما روی دکمه کلیک کنیم، مودال باز خواهد شد.

Modal در فریم ورک React Native

کلام پایانی

کاربران محترم پی وی لرن در این جلسه از سری آموزش های راکت نیتیو کامپوننت Modal در React Native رو مورد بررسی قرار دادیم و نحوه استفاده از کامپوننت مودال در React Native رو داشتیم . در ادامه به ActivityIndicator در React Native خواهیم پرداخت . موفق باشید.

QR: جلسه ۲۱ : کامپوننت Modal در React Native

به اشتراک بگذارید

Modal در React Native ,استفاده از مودال در React Native ,مودال در فریم ورک React Native

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۱ : کامپوننت Modal در React Native

مقدمه

کامپوننت Modal در React Native

App.js

modal_example.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ