SafeViewArea উপাদানটি ডিভাইসের নিরাপদ সীমানার মধ্যে আপনার সামগ্রী প্রদর্শন করার জন্য বোঝানো হয়েছে৷ এটি প্যাডিং যুক্ত করার যত্ন নেয় এবং আপনার সামগ্রীকে নেভিগেশন বার, টুলবার, ট্যাব বার ইত্যাদি দিয়ে কভার না করার বিষয়টিও নিশ্চিত করে৷ এই উপাদানটি শুধুমাত্র iOS ডিভাইসগুলির জন্য উপলব্ধ৷ এবং এখানে একই কাজের উদাহরণ।
আসুন একটি উদাহরণের সাহায্যে SafeAreaView ব্যবহার করার সুবিধা বুঝতে পারি।
নিম্নলিখিত উদাহরণটি বিবেচনা করুন যা পাঠ্য প্রদর্শন করতে ভিউ উপাদান ব্যবহার করে “টিউটোরিয়াল পয়েন্টে স্বাগতম!” .
উদাহরণ
টেক্সট প্রদর্শন করুন “টিউটোরিয়াল পয়েন্টে স্বাগতম!” ভিউ কম্পোনেন্টের ভিতরে
স্টাইল ফ্লেক্স:1 ভিউ কম্পোনেন্টে ব্যবহার করা হয়। টেক্সট কম্পোনেন্ট ভিউ কম্পোনেন্টের ভিতরে মোড়ানো হয় এবং "টিউটোরিয়াল পয়েন্টে স্বাগতম!" লেখাটি প্রদর্শন করে। আপনি যদি ডিফল্টরূপে আউটপুট দেখতে পান তাহলে স্ট্যাটাস বারে পাঠ্য রেন্ডার হয়।
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
export default App; আউটপুট
এখন আসুন iOS-এ SafeAreaView-এর সাহায্যে একই উদাহরণ দেখি।
উদাহরণ:SafeAreaView এর কাজ
নীচের উদাহরণে আমরা SafeAreaView-এর সাথে View কম্পোনেন্ট প্রতিস্থাপন করেছি।
SafeViewArea-এর সাথে কাজ করার জন্য আপনাকে এটি নিম্নরূপ আমদানি করতে হবে -
import { SafeAreaView } from 'react-native'; এখন আপনি যদি আউটপুটটি দেখেন তবে আপনি দেখতে পাবেন যে পাঠ্য উপাদানটিতে প্যাডিং যোগ করা হয়েছে এবং এখন এটি স্ট্যাটাস বারকে ওভারল্যাপ করে না।
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<Text style={{ color:'red', fontSize:'30'}}>Welcome To Tutorialspoint!</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
export default App; আউটপুট
