۲۹
فروردین

جلسه ۲۷ : کامپوننت Alert در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. همونطور که میدونید تا این جا بسیاری از مباحث برای کار با راکت نیتیو بیان شده است.در قسمت قبل نیز با مبحث نحوه استفاده از کامپوننت Text در React Native آشنا شدیم. در این بخش بنا داریم در مورد نحوه استفاده از کامپوننت Alert در React Native بحث نماییم. پس مستقیم می ریم سز وقت مبحث کامپوننت Alert در React Native . با ما همراه باشید.

کامپوننت Alert در React Native

در این فصل ما متوجه خواهیم شد که چگونه کامپونننت Alert یا هشدار سفارشی ایجاد کنیم. پس در ابتدا مراحل ایجاد کامپونننت Alert یا هشدار سفارشی در React Native رو بررسی می نماییم.

مرحله ۱: App.js

مثال :

import React from 'react'
import AlertExample from './alert_example.js'

const App = () => {
   return (
      <AlertExample />
   )
}
export default App

import React from 'react'

import AlertExample from './alert_example.js'

const App = () => {

return (

)

}

export default App

مرحله ۲: alert_example.js

ما یک دکمه برای اجرای تابع showAlert را ایجاد خواهیم کرد.

مثال :

import React from 'react'
import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'

const AlertExample = () => {
   const showAlert = () =>{
      Alert.alert(
         'You need to...'
      )
   }
   return (
      <TouchableOpacity onPress = {showAlert} style = {styles.button}>
         <Text>Alert</Text>
      </TouchableOpacity>
   )
}
export default AlertExample

const styles = StyleSheet.create ({
   button: {
      backgroundColor: '#4ba37b',
      width: 100,
      borderRadius: 50,
      alignItems: 'center',
      marginTop: 100
   }
})

import React from 'react'

import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native'

const AlertExample = () => {

const showAlert = () =>{

Alert.alert(

'You need to...'

)

}

return (

<Text>Alert</Text>

</TouchableOpacity>

)

}

export default AlertExample

const styles = StyleSheet.create ({

button: {

backgroundColor: '#4ba37b',

width: 100,

borderRadius: 50,

alignItems: 'center',

marginTop: 100

}

})

خروجی

کامپوننت Alert یا هشدار در React Native

هنگامی که روی دکمه کلیک می کنید، نتیجه ی زیر را مشاهده خواهید کرد.

کامپوننت Alert یا هشدار در React Native

کلام پایانی

دوستان عزیز تا این جای مباحث مربوط به راکت نیتیو با نحوه استفاده از کامپوننت های مختلف از جمله Picker ، کامپوننت Modal ،کامپوننت Text در React Native و… آشنا شدیم . در این بخش نیز در مورد نحوه استفاده از کامپوننت Alert در React Native بحث نمودیم. امیدوارم مورد توجه قرار گرفته باشه. در ادامه Geolocation یا موقعیت جغرافیایی دز راکت نیتیو رو مورد بررسی قرار خواهیم داد. از همراهی تون متشکریم.

QR: جلسه ۲۷ : کامپوننت Alert در React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۷ : کامپوننت Alert در React Native

مقدمه

کامپوننت Alert در React Native

خروجی

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ