سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در این جلسه کامپوننت Modal در React Native رو مورد بررسی قرار خواهیم داد و نحوه استفاده از کامپوننت مودال در React Native رو داریم .
در این فصل ما به شما نحوه استفاده از مولفه مودال در React Native را نشان خواهیم داد.
اکنون یک فایل جدید ایجاد می کنیم: ModalExample.js
ما Logic را در ModalExample قرار خواهیم داد. ما می توانیم با استفاده از toggleModal وضعیت اولیه را به روزرسانی کنیم.
پس از به روز رسانی وضعیت اولیه با استفاده از toggleModal، قابل مشاهده بودن یا visible را در modal تنظیم می کنیم. این prop زمانی که وضعیت تغییر می کند، به روز می شود.
onRequestClose برای دستگاه های آندروید مورد نیاز است.
1 2 3 4 5 6 7 8 9 | import React, { Component } from 'react' import WebViewExample from './modal_example.js' const Home = () => { return ( <WebViewExample/> ) } export default Home; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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 } }) |
صفحه شروع ما به این شبیه خواهد بود.
اگر ما روی دکمه کلیک کنیم، مودال باز خواهد شد.
کاربران محترم پی وی لرن در این جلسه از سری آموزش های راکت نیتیو کامپوننت Modal در React Native رو مورد بررسی قرار دادیم و نحوه استفاده از کامپوننت مودال در React Native رو داشتیم . در ادامه به ActivityIndicator در React Native خواهیم پرداخت . موفق باشید.