Thành phần Cảnh báo giúp hiển thị một hộp thoại, tức là cửa sổ bật lên cho người dùng với tiêu đề, thông báo, các nút để biết xác nhận từ người dùng dựa trên thông báo được hiển thị.
Thành phần cơ bản của Cảnh báo như sau -
Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’) Để làm việc với thành phần Cảnh báo, bạn cần nhập nó như sau -
import { Alert } from 'react-native'; Để có được cửa sổ bật lên, bạn chỉ cần gọi hàm Alert.alert (). Có bốn tham số mà alert () sử dụng và đó là tiêu đề, tin nhắn, các nút và tùy chọn. Tiêu đề là thông số bắt buộc và phần còn lại là tùy chọn.
Đây là một ví dụ đơn giản về cách sử dụng 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 }
); Tiêu đề ở đây là ‘Hi’, thông báo là ‘Bạn có muốn tiếp tục không’, các nút tôi muốn hiển thị trong hộp thoại là Sau, Hủy và Ok. Đối với mỗi nút sự kiện onPress được thêm vào, sẽ hiển thị một thông báo trên bảng điều khiển. Cuối cùng là tham số tùy chọn, điều này có thể được sử dụng để kiểm soát hành vi của cửa sổ bật lên. Trên Android theo mặc định, cửa sổ bật lên sẽ bị đóng nếu được nhấp vào bên ngoài ranh giới cửa sổ bật lên. Để vô hiệu hóa điều đó, bạn có thể sử dụng {hủy bỏ:false} làm tham số tùy chọn. Khi bạn nhấp vào bên ngoài khu vực cửa sổ bật lên, nó sẽ không bị đóng lại do có thể hủy được đặt thành false.
Trong trường hợp của iOS, bạn có thể chỉ định bất kỳ số lượng nút nào, nhưng trong Android, bạn có thể sử dụng ba nút. Ba nút trong Android có khái niệm về nút trung tính, tiêu cực và tích cực -
-
Nếu một nút được chỉ định, nó sẽ giống như một nút 'tích cực', chẳng hạn như 'OK'.
-
Nếu có hai nút, nút đầu tiên sẽ là 'tiêu cực' và nút thứ hai là 'tích cực'. Ví dụ:"Hủy" và "OK".
-
Nếu ba nút, nó sẽ là 'trung lập', 'tiêu cực', 'tích cực'. Ví dụ:'Sau này', 'Hủy' và 'OK'
Đây là một ví dụ hoạt động cho thấy hoạt động của thành phần Cảnh báo -
Ví dụ 1:Hiển thị hộp Cảnh báo
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; Đầu ra
Ví dụ 2:Sử dụng {hủy bỏ:true} cho Android
Trong ví dụ bên dưới, {hủy được:đúng} được sử dụng cùng với tiêu đề, thông báo và các nút. Vì vậy, hộp cảnh báo sẽ giống như bên dưới -
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 }
); Ví dụ hoạt động đầy đủ như sau -
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; Khi bạn nhấp vào bên ngoài khu vực cửa sổ bật lên, nó sẽ bị đóng.
Đầu ra
