نمایش Modal در react native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری یک Modal در React Native نمایش بدیم.Modal یک نوع از کامپوننت View هست که در هر دو نسخه Android و Ios در دسترسه و پشتیبانی میشه.Modal سه گزینه مختلف داره که به ما اجازه میده تصمیم بگیریم چجوری Modal در اپلیکیشن React Native ما نمایش داده بشه.
1.ایمپورت کردن کامپوننت های StyleSheet, View, Modal, Text, Button و Platform در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Modal, Text, Button, Platform } from 'react-native'; |
2.ایجاد constructor در کلاس.درون ()constructor یک state به نام ModalVisibleStatus تعریف میکنیم و مقدار پیشفرض رو False قرار میدیم.این state برای نمایش یا عدم نمایش Modal مورد استفاده قرار میگیره.
|
1 2 3 4 5 6 7 8 9 10 |
constructor(props) { super(props); this.state = { ModalVisibleStatus: false }; } |
3.ایجاد یک تابع به نام ()ShowModalFunction.از این تابع برای بروزرسانی ModalVisibleStatus استفاده میشه.
|
1 2 3 4 5 |
ShowModalFunction(visible) { this.setState({ModalVisibleStatus: visible}); } |
4.اضافه کردن کامپوننت View در بلاک render’s return.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
5.اضافه کردن کامپوننت Modal درون View.
transparent: این Prop از دو مقدار true و false پشتیبانی میکنه.اگه این مقدار false باشه نمایشگر شفاف(transparency)در حالت Modal غیرفعال خواهد شد و اگه این مقدار true باشه نمایشگر شفاف (transparency) در حالت Modal فعال خواهد شد.
animationType: این Prop از سه مقدار slide, fade و none پشتیبانی میکنه.
visible: از مقدار Boolean برای نمایش یا عدم نمایش Modal پشتیبانی میکنه.
onRequestClose: این Prop در دکمه back گوشی های اندرویدی و همچنین دکمه Menu تلیویزیون های Apple فراخوانی میشه.شما میتونید هر تابعی رو در رویداد on back دکمه فراخوانی کنید.
|
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 |
render() { return ( <View style={styles.MainContainer}> <Modal transparent={false} animationType={"slide"} visible={this.state.ModalVisibleStatus} onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } > </Modal> </View> ); } |
6.ایجاد View اصلی درون Modal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<Modal transparent={false} animationType={"slide"} visible={this.state.ModalVisibleStatus} onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } > <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}> </View> </Modal> |
7.اضافه کردن یک کامپوننت View دیگه درون View اصلی.ما این کامپوننت رو اضافه میکنیم چون میخواهیم Modal رو وسط صفحه نمایش نشون بدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<Modal transparent={false} animationType={"slide"} visible={this.state.ModalVisibleStatus} onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } > <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}> <View style={styles.ModalInsideView}> </View> </View> </Modal> |
8.اضافه کردن کامپوننت های Text و Button درون View. کامپوننت Button برای پنهان کردن Modal مورد استفاده قرار میگیره،بنابراین ما در رویداد onPress تابع ShowModalFunction(!this.state.ModalVisibleStatus) رو فراخوانی میکنیم.
|
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 |
Modal transparent={false} animationType={"slide"} visible={this.state.ModalVisibleStatus} onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } > <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}> <View style={styles.ModalInsideView}> {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */} <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text> <Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } /> {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */} </View> </View> </Modal> |
9.اضافه کردن کامپوننت Button درون View اصلی بعد از Modal.این button برای نمایش Modal مورد استفاده قرار میگیره.
|
1 |
<Button onPress={() => { this.ShowModalFunction(true) }} title="Click Here To Show Modal" /> |
10.ایجاد استایل سفارشی
|
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 |
const styles = StyleSheet.create({ MainContainer :{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: (Platform.OS == 'ios') ? 20 : }, ModalInsideView:{ justifyContent: 'center', alignItems: 'center', backgroundColor : "#00BCD4", height: 300 , width: '90%', borderRadius:10, borderWidth: 1, borderColor: '#fff' }, TextStyle:{ fontSize: 20, marginBottom: 20, color: "#fff", padding: 20, textAlign: 'center' } }); |
11.کد کامل برنامه در فایل App.js
|
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import React, { Component } from 'react'; import { StyleSheet, View, Modal, Text, Button, Platform } from 'react-native'; export default class Mynewproject extends Component { constructor(props) { super(props); this.state = { ModalVisibleStatus: false }; } ShowModalFunction(visible) { this.setState({ModalVisibleStatus: visible}); } render() { return ( <View style={styles.MainContainer}> <Modal transparent={false} animationType={"slide"} visible={this.state.ModalVisibleStatus} onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } > <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}> <View style={styles.ModalInsideView}> {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */} <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text> <Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } /> {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */} </View> </View> </Modal> <Button onPress={() => { this.ShowModalFunction(true) }} title="Click Here To Show Modal" /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: (Platform.OS == 'ios') ? 20 : }, ModalInsideView:{ justifyContent: 'center', alignItems: 'center', backgroundColor : "#00BCD4", height: 300 , width: '90%', borderRadius:10, borderWidth: 1, borderColor: '#fff' }, TextStyle:{ fontSize: 20, marginBottom: 20, color: "#fff", padding: 20, textAlign: 'center' } }); |
اسکرین شات در نسخه Android:
اسکرین شات در نسخه Ios:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید