آموزش مودال در برنامه نویسی ریکت نیتیو

4 سال پیش

امتیاز دهید post

آموزش مودال در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش مودال در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

بیایید اکنون یک فایل جدید ایجاد کنیم: ModalExample.js

ما منطق را داخل ModalExample قرار خواهیم داد. با اجرای toggleModal می توانیم حالت اولیه را به روز کنیم.

پس از به روزرسانی حالت اولیه با اجرای toggleModal، ویژگی قابل مشاهده را روی حالت خود قرار می دهیم. با تغییر وضعیت این پروپ به روز می شود.

onRequestClose برای دستگاههای Android لازم است.

App.js

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

const Home = () =&gt; {
   return (
      &lt;WebViewExample/&gt;
   )
}
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 (
         &lt;View style = {styles.container}&gt;
            &lt;Modal animationType = {"slide"} transparent = {false}
               visible = {this.state.modalVisible}
               onRequestClose = {() =&gt; { console.log("Modal has been closed.") } }&gt;
               
               &lt;View style = {styles.modal}&gt;
                  &lt;Text style = {styles.text}&gt;Modal is open!&lt;/Text&gt;
                  
                  &lt;TouchableHighlight onPress = {() =&gt; {
                     this.toggleModal(!this.state.modalVisible)}}&gt;
                     
                     &lt;Text style = {styles.text}&gt;Close Modal&lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
               &lt;/View&gt;
            &lt;/Modal&gt;
            
            &lt;TouchableHighlight onPress = {() =&gt; {this.toggleModal(true)}}&gt;
               &lt;Text style = {styles.text}&gt;Open Modal&lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
         &lt;/View&gt;
      )
   }
}
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

}

})

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

React Native Open Modal

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

React Native Modal

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

آموزش مودال در برنامه نویسی ریکت نیتیو

آموزش مودال در برنامه نویسی ریکت نیتیو

App.js

modal_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش مودال در برنامه نویسی ریکت نیتیو

App.js

modal_example.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه