সতর্কতা উপাদানটি একটি ডায়ালগ বক্স দেখাতে সাহায্য করে যেমন, ব্যবহারকারীর কাছে একটি শিরোনাম, বার্তা, বোতাম সহ একটি পপ আপ প্রদর্শন করা বার্তার উপর ভিত্তি করে ব্যবহারকারীর কাছ থেকে নিশ্চিতকরণ জানতে৷
সতর্কতার মৌলিক উপাদান নিম্নরূপ -
Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’) সতর্কতা উপাদানের সাথে কাজ করার জন্য আপনাকে এটি নিম্নরূপ আমদানি করতে হবে -
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 }
); এখানে শিরোনাম হল 'হাই', বার্তাটি হল 'আপনি কি চালিয়ে যেতে চান', ডায়ালগ বক্সে আমি যে বোতামগুলি দেখাতে চাই তা হল Later, Cancel এবং Ok। প্রতিটি বোতামের জন্য প্রেস ইভেন্ট যোগ করা হয়, যা একটি কনসোল বার্তা প্রদর্শন করে। শেষ বিকল্পটি প্যারাম।, এটি পপ-আপের আচরণ নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। অ্যান্ড্রয়েডে ডিফল্টভাবে পপ-আপ সীমানার বাইরে ক্লিক করলে পপ-আপ বন্ধ হয়ে যাবে। এটি নিষ্ক্রিয় করতে আপনি বিকল্প প্যারাম হিসাবে { বাতিলযোগ্য:মিথ্যা } ব্যবহার করতে পারেন। আপনি যখন পপ-আপ এলাকার বাইরে ক্লিক করেন তখন বাতিলযোগ্য সেট মিথ্যা হওয়ার কারণে এটি বন্ধ হবে না।
আইওএসের ক্ষেত্রে আপনি যেকোন সংখ্যক বোতাম নির্দিষ্ট করতে পারেন, তবে অ্যান্ড্রয়েডে আপনি তিনটি বোতাম ব্যবহার করতে পারেন। অ্যান্ড্রয়েডের তিনটি বোতামে একটি নিরপেক্ষ, নেতিবাচক এবং একটি ইতিবাচক বোতামের ধারণা রয়েছে যেমন −
-
যদি একটি বোতাম নির্দিষ্ট করা হয়, তাহলে এটি 'পজিটিভ' একটির মত হবে যেমন 'ওকে'।
-
দুটি বোতাম থাকলে তা হবে প্রথম 'নেতিবাচক' এবং দ্বিতীয়টি 'পজিটিভ'। যেমন 'বাতিল' এবং 'ঠিক আছে'।
-
তিনটি বোতাম থাকলে তা হবে 'নিরপেক্ষ', 'নেতিবাচক', 'পজিটিভ'। যেমন 'পরে', 'বাতিল' এবং 'ঠিক আছে'
এখানে সতর্কতা উপাদান −
-এর কাজ দেখানো একটি কার্যকরী উদাহরণউদাহরণ 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 এর জন্য { cancelable:true } ব্যবহার করা
৷নীচের উদাহরণে শিরোনাম, বার্তা এবং বোতামগুলির সাথে { বাতিলযোগ্য:সত্য } ব্যবহার করা হয়েছে৷ তাই সতর্কতা বাক্সটি নিচের মত দেখাবে −
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; আপনি যখন পপ-আপ এলাকার বাইরে ক্লিক করবেন তখন এটি বন্ধ হয়ে যাবে।
আউটপুট
