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

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

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

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

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

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

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

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

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

منبع.

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

1. آموزش برنامه نویسی ریکت نیتیو
2. آموزش تنظیمات محیطی برنامه نویسی ریکت نیتیو
3. آموزش برنامه نویسی ریکت نیتو – برنامه
4. آموزش state در برنامه نویسی ریکت نیتیو 
5. آموزش Props در برنامه نویسی ریکت نیتیو 
6. آموزش استایل دهی در برنامه نویسی ریکت نیتیو
7. آموزش Flexbox در برنامه نویسی ریکت نیتیو
8. آموزش ListView در برنامه نویسی ریکت نیتیو
9. آموزش ورودی متن در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12.  آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با دکمه ها در برنامه نویسی ریکت نیتیو
14. آموزش انیمیشن ها در برنامه نویسی ریکت نیتیو
15. آمورش اشکال زدایی در برنامه نویسی ریکت نیتیو
16. آموزش روتر در برنامه نویسی ریکت نیتیو
17. آموزش اجرای IOS در برنامه نویسی ریکت نیتیو
18. آموزش اجرای اندروید در برنامه نویسی ریکت نیتیو
19. آموزش View در برنامه نویسی ریکت نیتیو
20. آموزش WebView در برنامه نویسی ریکت نیتیو