SafeAreaView कंपोनेंट आपके कंटेंट को डिवाइस की सुरक्षित सीमाओं के भीतर प्रदर्शित करने के लिए है। यह पैडिंग जोड़ने का ख्याल रखता है और यह भी सुनिश्चित करता है कि आपका कंटेंट नेविगेशन बार, टूलबार, टैब बार आदि से ढका न हो। यह कंपोनेंट केवल iOS डिवाइस के लिए उपलब्ध है और यहां इसका एक कार्यात्मक उदाहरण दिया गया है।
आइए एक उदाहरण की मदद से SafeAreaView का उपयोग करने के लाभ को समझते हैं।
निम्न उदाहरण पर विचार करें जो टेक्स्ट "Welcome to Tutorialspoint!" प्रदर्शित करने के लिए View कंपोनेंट का उपयोग करता है।
उदाहरण
View कंपोनेंट के अंदर टेक्स्ट "Welcome to Tutorialspoint!" प्रदर्शित करना
View कंपोनेंट पर style flex: 1 का उपयोग किया गया है। Text कंपोनेंट View कंपोनेंट के अंदर लपेटा गया है और टेक्स्ट "Welcome To Tutorialspoint!" प्रदर्शित करता है। यदि आप आउटपुट देखते हैं तो डिफ़ॉल्ट रूप से टेक्स्ट स्टेटस बार पर रेंडर होता है।
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
return (
Welcome To Tutorialspoint!
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
export default App;
आउटपुट
अब आइए iOS में SafeAreaView की मदद से यही उदाहरण देखते हैं।
उदाहरण: SafeAreaView का कार्य
नीचे दिए गए उदाहरण में हमने View कंपोनेंट को SafeAreaView से बदल दिया है।
SafeAreaView के साथ काम करने के लिए आपको इसे निम्नानुसार इम्पोर्ट करना होगा:
import { SafeAreaView } from 'react-native';
अब यदि आप आउटपुट देखते हैं तो आप देखेंगे कि Text कंपोनेंट में पैडिंग जोड़ी गई है और अब यह स्टेटस बार को ओवरलैप नहीं करता।
import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
return (
Welcome To Tutorialspoint!
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
});
export default App;
आउटपुट
