کامپوننت Alert در ری اکت نیتیو (React Native – Alert)

در این مقاله، نحوه ی ایجاد مولفه ی alert به صورت سفارشی شده را می آموزیم.
مرحله ی اول : App.js
1 2 3 4 5 6 7 8 9 |
import React from 'react' import AlertExample from './alert_example.js' const App = () => { return ( <AlertExample /> ) } export default App |
مرحله ی دوم : alert_example.js
دکمه ای برای فعال کردن تابع showAlert ایجاد می کنیم :
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 |
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 } }) |
خروجی :
وقتی دکمه را فشار دهید تصویر زیر را میبینید:
این خبر را به اشتراک بگذارید :