ایجاد Custom Alert Dialog Box در React Native


سلام دوستان.در این آموزش متنی قصدداریم یاد بگیریم چجوری یک Alert Dialog Box سفارشی در React Native ایجاد کنیم.React Native به طور پیشفرض یک box محاوره ای در اختیار ما قرار میدهد تا پیام های هشدار خود را به کاربر نمایش دهیم اما این box قدیمی است و قابلیت اضافه کردن تصاویر و طرح بندی سفارشی رو نداره.ما میتوانیم با استفاده از کامپوننت Modal یک Dialog Box سفارشی بسازیم که عملیاتی مختلفی مثل cancel کردن یا تایید کردن یک عملیات را دارد.
1.ایمپورت کردن کامپوننت های Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity و Alert در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from 'react-native'; |
2.ایجاد یک state به نام Visibility که برای نمایش یا عدم نمایش Modal مورد استفاده قرار میگیرد.
1 2 3 4 5 6 7 8 9 10 |
constructor(props) { super(props); this.state = { Alert_Visibility: false }; } |
3.ایجاد یک تابع به نام ()Show_Custom_Alert.این تابع برای نمایش یا عدم نمایش Alert Dialog Box مورد استفاده قرار میگیرد.
1 2 3 4 5 |
Show_Custom_Alert(visible) { this.setState({Alert_Visibility: visible}); } |
4.ایجاد یک تابع به نام ()Show_Custom_Alert. این تابع در رویداد onPress دکمه OK فراخوانی میشود.
1 2 3 4 5 |
ok_Button=()=>{ Alert.alert("OK Button Clicked."); } |
5.اضافه کردن View در بلاک render’s return.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
6.اضافه کردن کامپوننت Modal درون View.
visible : این pro برای نمایش یا عدم نمایش Modal با استفاده از state مورد استفاده قرار میگیرد.
transparent : این props پشت زمیته Modal را شفاف میکند.
animationType : شما میتوانید مشخص کنید که Modal چگونه و با چه افکتی به کاربر نمایش داده شود.
- Slide
- fade
- none
onRequestClose :این props باعث میشود تا Alert Dialog Box دیگر نمایش داده نشود.
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 |
render() { return ( <View style={styles.MainContainer}> <Modal visible={this.state.Alert_Visibility} transparent={false} animationType={"fade"} onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } > </Modal> </View> ); } |
7.ایجاد Custom Alert Dialog 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 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 |
render() { return ( <View style={styles.MainContainer}> <Modal visible={this.state.Alert_Visibility} transparent={false} animationType={"fade"} onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } > <View style={{ flex:1, alignItems: 'center', justifyContent: 'center' }}> <View style={styles.Alert_Main_View}> <Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text> <View style={{ width: '100%', height: 2, backgroundColor: '#fff'}} /> <Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#fff'}} /> <View style={{flexDirection: 'row', height: '30%'}}> <TouchableOpacity style={styles.buttonStyle} onPress={this.ok_Button} activeOpacity={0.7} > <Text style={styles.TextStyle}> OK </Text> </TouchableOpacity> <View style={{ width: 1, height: '100%', backgroundColor: '#fff'}} /> <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } activeOpacity={0.7} > <Text style={styles.TextStyle}> CANCEL </Text> </TouchableOpacity> </View> </View> </View> </Modal> </View> ); } |
8.اضافه کردن کامپوننت button بعد از بسته شدن کامپوننت modal .با کلیک بر روی این کامپوننت Alert dialog نمایش داده میشود.
1 |
<Button onPress={() => { this.Show_Custom_Alert(true) }} title="Click Here To Show Custom Alert Dialog" /> |
9.ایجاد استایل
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 |
const styles = StyleSheet.create({ MainContainer :{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: (Platform.OS == 'ios') ? 20 : }, Alert_Main_View:{ alignItems: 'center', justifyContent: 'center', backgroundColor : "#009688", height: 200 , width: '90%', borderWidth: 1, borderColor: '#fff', borderRadius:7, }, Alert_Title:{ fontSize: 25, color: "#fff", textAlign: 'center', padding: 10, height: '28%' }, Alert_Message:{ fontSize: 22, color: "#fff", textAlign: 'center', padding: 10, height: '42%' }, buttonStyle: { width: '50%', height: '100%', justifyContent: 'center', alignItems: 'center' }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 22, marginTop: -5 } }); |
10.کد کامل برنامه در فایل 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from 'react-native'; export default class Mynewproject extends Component { constructor(props) { super(props); this.state = { Alert_Visibility: false }; } Show_Custom_Alert(visible) { this.setState({Alert_Visibility: visible}); } ok_Button=()=>{ Alert.alert("OK Button Clicked."); } render() { return ( <View style={styles.MainContainer}> <Modal visible={this.state.Alert_Visibility} transparent={false} animationType={"fade"} onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } > <View style={{ flex:1, alignItems: 'center', justifyContent: 'center' }}> <View style={styles.Alert_Main_View}> <Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text> <View style={{ width: '100%', height: 2, backgroundColor: '#fff'}} /> <Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text> <View style={{ width: '100%', height: 1, backgroundColor: '#fff'}} /> <View style={{flexDirection: 'row', height: '30%'}}> <TouchableOpacity style={styles.buttonStyle} onPress={this.ok_Button} activeOpacity={0.7} > <Text style={styles.TextStyle}> OK </Text> </TouchableOpacity> <View style={{ width: 1, height: '100%', backgroundColor: '#fff'}} /> <TouchableOpacity style={styles.buttonStyle} onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } activeOpacity={0.7} > <Text style={styles.TextStyle}> CANCEL </Text> </TouchableOpacity> </View> </View> </View> </Modal> <Button onPress={() => { this.Show_Custom_Alert(true) }} title="Click Here To Show Custom Alert Dialog" /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ flex:1, justifyContent: 'center', alignItems: 'center', marginTop: (Platform.OS == 'ios') ? 20 : }, Alert_Main_View:{ alignItems: 'center', justifyContent: 'center', backgroundColor : "#009688", height: 200 , width: '90%', borderWidth: 1, borderColor: '#fff', borderRadius:7, }, Alert_Title:{ fontSize: 25, color: "#fff", textAlign: 'center', padding: 10, height: '28%' }, Alert_Message:{ fontSize: 22, color: "#fff", textAlign: 'center', padding: 10, height: '42%' }, buttonStyle: { width: '50%', height: '100%', justifyContent: 'center', alignItems: 'center' }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 22, marginTop: -5 } }); |
اسکرین شات در نسخه Android:
اسکرین شات در نسخه Ios:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ببخشید اونوقت با همین استایل در اندروید هم نمایش داده میشه؟
سلام بلی