ส่วนประกอบ Alert ช่วยในการแสดงกล่องโต้ตอบ เช่น ป๊อปอัปที่มีชื่อ ข้อความ ปุ่มต่างๆ เพื่อทราบการยืนยันจากผู้ใช้ตามข้อความที่แสดง
องค์ประกอบพื้นฐานของการแจ้งเตือนมีดังนี้ -
Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’) ในการทำงานกับองค์ประกอบ Alert คุณต้องนำเข้าดังนี้ -
import { Alert } from 'react-native'; ในการรับป๊อปอัป คุณเพียงแค่เรียกใช้ฟังก์ชัน Alert.alert() มีสี่พารามิเตอร์ที่ alert() ใช้และเป็นชื่อ, ข้อความ, ปุ่มและตัวเลือก ชื่อเรื่องเป็นข้อบังคับบังคับ และสามารถเลือกพักได้
นี่เป็นตัวอย่างง่ายๆ เกี่ยวกับวิธีใช้ Alert.alert() -
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: false }
); ชื่อที่นี่คือ 'สวัสดี' ข้อความคือ 'คุณต้องการดำเนินการต่อหรือไม่' ปุ่มที่ฉันต้องการแสดงในกล่องโต้ตอบคือภายหลัง ยกเลิก และตกลง สำหรับแต่ละปุ่มที่เพิ่มเหตุการณ์ onPress ซึ่งจะแสดงข้อความคอนโซล สุดท้ายคือตัวเลือกพารามิเตอร์ ซึ่งใช้เพื่อควบคุมการทำงานของป๊อปอัป บน Android โดยค่าเริ่มต้น ป๊อปอัปจะปิดลงหากคลิกนอกขอบเขตป๊อปอัป หากต้องการปิดใช้งานคุณสามารถใช้ { ยกเลิกได้:เท็จ } เป็นพารามิเตอร์ตัวเลือก เมื่อคุณคลิกนอกพื้นที่ป๊อปอัป ระบบจะไม่ปิดเนื่องจากการตั้งค่าที่ยกเลิกได้เป็นเท็จ
ในกรณีของ iOS คุณสามารถระบุปุ่มจำนวนเท่าใดก็ได้ แต่ใน Android คุณสามารถใช้ปุ่มได้สามปุ่ม ปุ่มสามปุ่มใน Android มีแนวคิดเกี่ยวกับปุ่มที่เป็นกลาง ปุ่มลบ และปุ่มบวก เช่น −
-
หากมีการระบุปุ่มหนึ่งปุ่ม มันจะเหมือนกับปุ่ม 'บวก' เช่น 'ตกลง'
-
หากสองปุ่มจะเป็นปุ่ม 'เชิงลบ' และปุ่มที่สอง 'บวก' ตัวอย่างเช่น 'ยกเลิก' และ 'ตกลง'
-
หากสามปุ่มจะเป็น 'เป็นกลาง', 'เชิงลบ', 'บวก' ตัวอย่างเช่น 'ภายหลัง' 'ยกเลิก' และ 'ตกลง'
นี่คือตัวอย่างการทำงานที่แสดงการทำงานขององค์ประกอบการแจ้งเตือน -
ตัวอย่างที่ 1:การแสดงกล่องแจ้งเตือน
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
const testAlert = () =>
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: false }
);
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
title="Click Me"
color="#9C27B0"
onPress={testAlert}
/>
</View>
);
}
export default App; ผลลัพธ์
ตัวอย่างที่ 2:การใช้ { ยกเลิกได้:จริง } สำหรับ Android
ในตัวอย่างด้านล่าง ใช้ { ยกเลิกได้:จริง } ร่วมกับชื่อ ข้อความ และปุ่ม ดังนั้นกล่องแจ้งเตือนจะมีลักษณะดังนี้ -
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: true }
); ตัวอย่างการทำงานทั้งหมดมีดังนี้ −
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
const testAlert = () =>
Alert.alert(
"Hi",
"Do you want to continue?",
[
{
text: "Later",
onPress: () => console.log("User pressed Later")
},
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK",
onPress: () => console.log("OK Pressed")
}
],
{ cancelable: true }
);
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<Button
title="Click Me"
color="#9C27B0"
onPress={testAlert}
/>
</View>
);
}
export default App; เมื่อคุณคลิกนอกพื้นที่ป๊อปอัป ป๊อปอัปจะปิดลง
ผลลัพธ์
