ایجاد 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 در پروژه.

import React, { Component } from 'react';
 
import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from 'react-native';

import React, { Component } from 'react';

import { Platform, StyleSheet, View, Text, Modal, Button, TouchableOpacity, Alert } from 'react-native';

2.ایجاد یک state به نام Visibility که برای نمایش یا عدم نمایش Modal مورد استفاده قرار میگیرد.

constructor(props) {
 
    super(props);
 
    this.state = { 
        
        Alert_Visibility: false 
    };
 
  }

constructor(props) {

super(props);

this.state = {

Alert_Visibility: false

};

}

3.ایجاد یک تابع به نام ()Show_Custom_Alert.این تابع برای نمایش یا عدم نمایش Alert Dialog Box مورد استفاده قرار میگیرد.

Show_Custom_Alert(visible) {
 
    this.setState({Alert_Visibility: visible});
    
  }

Show_Custom_Alert(visible) {

this.setState({Alert_Visibility: visible});

}

4.ایجاد یک تابع به نام ()Show_Custom_Alert. این تابع در رویداد onPress دکمه OK فراخوانی میشود.

ok_Button=()=>{
 
    Alert.alert("OK Button Clicked.");
 
  }

ok_Button=()=>{

Alert.alert("OK Button Clicked.");

}

5.اضافه کردن View در بلاک render’s return.

render() {
     
   return (
 
      <View style={styles.MainContainer}>
 
        
 
      </View>
 
           
   );
 }

render() {

return (

</View>

);

}

6.اضافه کردن کامپوننت Modal درون View.

visible : این pro برای نمایش یا عدم نمایش Modal با استفاده از state مورد استفاده قرار میگیرد.

transparent : این props پشت زمیته Modal را شفاف میکند.

animationType : شما میتوانید مشخص کنید که Modal چگونه و با چه افکتی به کاربر نمایش داده شود.

Slide
fade
none

onRequestClose :این props باعث میشود تا Alert Dialog Box دیگر نمایش داده نشود.

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

render() {

return (

<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

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

render() {

return (

<Modal

visible={this.state.Alert_Visibility}

transparent={false}

animationType={"fade"}

onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } >

<Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text>

<Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text>

<TouchableOpacity

style={styles.buttonStyle}

onPress={this.ok_Button}

activeOpacity={0.7}

</TouchableOpacity>

<TouchableOpacity

style={styles.buttonStyle}

onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} }

activeOpacity={0.7}

<Text style={styles.TextStyle}> CANCEL </Text>

</TouchableOpacity>

</View>

</Modal>

</View>

);

}

8.اضافه کردن کامپوننت button بعد از بسته شدن کامپوننت modal .با کلیک بر روی این کامپوننت Alert dialog نمایش داده میشود.

 <Button onPress={() => { this.Show_Custom_Alert(true) }} title="Click Here To Show Custom Alert Dialog" />

1	<Button onPress={() => { this.Show_Custom_Alert(true) }} title="Click Here To Show Custom Alert Dialog" />

9.ایجاد استایل

const styles = StyleSheet.create({
 
MainContainer :{
    
 flex:1,
 justifyContent: 'center',
 alignItems: 'center',
 marginTop: (Platform.OS == 'ios') ? 20 : 0
 
},
 
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
}
 
});

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/upload-image-to-server-using-php-mysql/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/using-php-mysql-300x162.jpg" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">آپلود عکس در سرور با استفاده از PHP در React Native</div></div></div><div class="ctaButton"></div></div></a></div> 
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 : 0
 
},
 
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
}
 
});

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 (

<Modal

visible={this.state.Alert_Visibility}

transparent={false}

animationType={"fade"}

onRequestClose={ () => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} } >

<Text style={styles.Alert_Title}>Custom Alert Dialog Title.</Text>

<Text style={styles.Alert_Message}> Are You Sure(Alert Dialog Message). </Text>

<TouchableOpacity

style={styles.buttonStyle}

onPress={this.ok_Button}

activeOpacity={0.7}

</TouchableOpacity>

<TouchableOpacity

style={styles.buttonStyle}

onPress={() => { this.Show_Custom_Alert(!this.state.Alert_Visibility)} }

activeOpacity={0.7}

<Text style={styles.TextStyle}> CANCEL </Text>

</TouchableOpacity>

</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

دیدگاهتان را بنویسید لغو پاسخ