ایجاد Alert Dialog در react native

سلام دوستان.دراین آموزش متنی قصد داریم یاد بگیریم که چجوری یک Alert Dialog در ReactNative ایجاد کنیم.alert یکی از دستورات جاوا اسکریپته.alert در ReactNative برای نمایش یک پیغام ساده مناسبه اما با استفاده از Alert ما میتونیم یک پیغام با دکمه های OK, CANCEL و ASK ME LATER به کاربر نمایش بدیم.

1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید.

2.اضافه کردن کامپوننت های AppRegistry, StyleSheet, Text, View, Button و Alert در بلاک import

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

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, Button, Alert } from 'react-native';

3.ایجاد یک تابع به نام ()ShowAlertDialog در کلاس اصلی.این تابع یک Alert dialog با استفاده از کامپوننت Alert ایجاد میکنه.

ShowAlertDialog = () =>{
 
  Alert.alert(
    
    // This is Alert Dialog Title
    'Alert Dialog Title',
 
    // This is Alert Dialog Message. 
    'Alert Dialog Message',
    [
      // First Text Button in Alert Dialog.
      {text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},
 
      // Second Cancel Button in Alert Dialog.
      {text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},
 
      // Third OK Button in Alert Dialog
      {text: 'OK', onPress: () => console.log('OK ButtonPressed')},
      
    ]
 
  )
 
}

ShowAlertDialog = () =>{

Alert.alert(

// This is Alert Dialog Title

'Alert Dialog Title',

// This is Alert Dialog Message.

'Alert Dialog Message',

[

// First Text Button in Alert Dialog.

{text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},

// Second Cancel Button in Alert Dialog.

{text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},

// Third OK Button in Alert Dialog

{text: 'OK', onPress: () => console.log('OK ButtonPressed')},

]

)

}

4.اضافه کردن کامپوننت View در بلاک render’s return

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

render() {

return (

</View>

);

}

5. اضافه کردن کامپوننت Button درون View برای فراخوانی تابع ()ShowAlertDialog در رویداد button onPress

render() {
 
   return (
 
     <View style={styles.MainContainer}>
 
     <Button title="Show Alert Dialog " onPress={this.ShowAlertDialog} />
 
     </View>
   );
 }

render() {

return (

</View>

);

}

6.ایجاد استایل سفارشی برای View

ارسال sms از طریق اپلیکیشن در react native

const styles = StyleSheet.create({
 
MainContainer :{
 
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10
 
}
 
});

const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.

justifyContent: 'center',

flex:1,

margin: 10

}

});

7.کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, Text, View, Button, Alert } from 'react-native';
 
class Myproject extends Component {
 
 
ShowAlertDialog = () =>{
 
  Alert.alert(
    
    // This is Alert Dialog Title
    'Alert Dialog Title',
 
    // This is Alert Dialog Message. 
    'Alert Dialog Message',
    [
      // First Text Button in Alert Dialog.
      {text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},
 
      // Second Cancel Button in Alert Dialog.
      {text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},
 
      // Third OK Button in Alert Dialog
      {text: 'OK', onPress: () => console.log('OK ButtonPressed')},
      
    ]
 
  )
 
}
 
 render() {
 
   return (
 
     <View style={styles.MainContainer}>
 
     <Button title="Show Alert Dialog " onPress={this.ShowAlertDialog} />
 
     </View>
   );
 }
}
 
const styles = StyleSheet.create({
 
MainContainer :{
 
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10
 
}
 
});
 
AppRegistry.registerComponent('Myproject', () => Myproject);

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, Button, Alert } from 'react-native';

class Myproject extends Component {

ShowAlertDialog = () =>{

Alert.alert(

// This is Alert Dialog Title

'Alert Dialog Title',

// This is Alert Dialog Message.

'Alert Dialog Message',

[

// First Text Button in Alert Dialog.

{text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},

// Second Cancel Button in Alert Dialog.

{text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},

// Third OK Button in Alert Dialog

{text: 'OK', onPress: () => console.log('OK ButtonPressed')},

]

)

}

render() {

return (

</View>

);

}

const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.

justifyContent: 'center',

flex:1,

margin: 10

}

});

AppRegistry.registerComponent('Myproject', () => Myproject);

اسکرین شات در اپلیکیشن Ios

اسکرین شات در اپلیکیشن Android

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

امید گفت:

ژانویه 25, 2018 در 7:49 ب.ظ

سلام
میشه RTL کردنِ این alertها رو هم آموزش بدید که بشه به خوبی ازشون تو اپ های فارسی استفاده کرد؟
یا اگه نمیشه، کامپوننتِ جایگزین معرفی کنید
ممنون

پاسخ
- مهدی گفت:
  
  ژانویه 25, 2018 در 11:04 ب.ظ
  
  سلام برای RTL کردن این alert ها کافیه که فقط پیام ها رو به صورت فارسی بنویسید و بطور خودکار alert بصورت rtl نمایش داده میشه.همچنین میتونید برای سفارشی کردن بیشتر alert ها از این دو کتابخونه استفاده کنید
  https://github.com/maxs15/react-native-modalbox
  https://github.com/react-native-community/react-native-modal
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

2 دیدگاه

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