React Native - การแจ้งเตือน

ในบทนี้เราจะเข้าใจวิธีการสร้างแบบกำหนดเอง Alert ส่วนประกอบ.

ขั้นตอนที่ 1: App.js

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

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

ขั้นตอนที่ 2: 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
   }
})

เอาต์พุต

เมื่อคุณคลิกปุ่มคุณจะเห็นสิ่งต่อไปนี้ -