شرح عمل تنبيه Alert في مكتبة React Native

 

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى استخدام Alert في مكتبة React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. 

درس اليوم بسيط و سهل ان شاء الله،

الـ Alert عبارة عن مكوّن (Components) طبيعي (Native) مستمد من API متوفر في نظامي الأندرويد و iOS  بمكتبة رياكت نيتف، و يمكننا اعتباره عن مربع حوار للتنبيه ننشؤه مع العنوان المحدد والرسالة التي نريدها. و يمكننا تعديله أكثر لنجعل المستخدم يدخل معلومة  .. أو يوافق على شروط معينة بنعم أو لا مثلا .. و هي مستخدمة بكثرة.

لانشاء التنبيه علينا تضمين المكتبة و استدعاؤها في رأس الملف:

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

و ننشأ وظيفة (function) تحمل الاسم  ShowAlertDialog() و التي بداخلها كود التنبيه:

ShowAlertDialog = () =>{

  Alert.alert(
    
    // هنا ندخل عنوان التنبيه
    'Alert Dialog Title',

    // و هنا رسالة التنبيه
    'Alert Dialog Message',
    [
      // نص التنبيه الأول الذي يظهر عند ضغط الزر
      {text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},

      // نص التنبيه الأول الذي يظهر عند ضغط زر الاغلاق
      {text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},

      // نص التنبيه الأول الذي يظهر عند ضغط زر الموافقة
      {text: 'OK', onPress: () => console.log('OK ButtonPressed')},
      
    ]

  )

}

و هذه الشفرة الكاملة لتطبيقنا، قد شرحنا معظمه في مقالاتنا السابقة كما أخبرتكم، يمكنكم العودة لها للتوضيح أكثر ..

import React, { Component } from 'react';

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

class Myproject extends Component {


ShowAlertDialog = () =>{

  Alert.alert(
    
    'Alert Dialog Title',

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

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

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

و هذه نتائج تطبيقنا السابق على الأندرويد و iOS :

 

 

نصل الى نهاية درس اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا.

 

كلمات دليلية: alert react reactnt رياكت رياكت نيت