SafeViewArea घटक आपकी सामग्री को डिवाइस की सुरक्षित सीमाओं में प्रदर्शित करने के लिए है। यह पैडिंग जोड़ने का ध्यान रखता है और यह भी सुनिश्चित करता है कि आपकी सामग्री को नेविगेशन बार, टूलबार, टैब बार आदि के साथ कवर न किया जाए। यह घटक केवल iOS उपकरणों के लिए उपलब्ध है। और यहाँ उसी का एक कार्यशील उदाहरण है।
आइए एक उदाहरण की सहायता से SafeAreaView का उपयोग करने के लाभ को समझते हैं।
निम्न उदाहरण पर विचार करें जो “ट्यूटोरियल पॉइंट में आपका स्वागत है!” टेक्स्ट प्रदर्शित करने के लिए व्यू घटक का उपयोग करता है। ।
उदाहरण
प्रदर्शन टेक्स्ट "ट्यूटोरियल पॉइंट में आपका स्वागत है!" अंदर देखें घटक
स्टाइल फ्लेक्स:1 का उपयोग व्यू कंपोनेंट पर किया जाता है। टेक्स्ट कंपोनेंट को व्यू कंपोनेंट के अंदर लपेटा जाता है और "वेलकम टू ट्यूटोरियल पॉइंट!" टेक्स्ट प्रदर्शित करता है। यदि आप डिफ़ॉल्ट रूप से आउटपुट देखते हैं तो टेक्स्ट स्टेटस बार पर रेंडर होता है।
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {शैलीपत्रक, पाठ, दृश्य} 'प्रतिक्रिया-मूल' से; कॉन्स्ट ऐप =() => {वापसी (<शैली देखें ={styles.container}> <पाठ शैली ={ {रंग:'लाल', फ़ॉन्ट आकार:'30'}}>ट्यूटोरियल पॉइंट में आपका स्वागत है! ); } कॉन्स्ट स्टाइल =StyleSheet.create ({कंटेनर:{फ्लेक्स:1},}); डिफ़ॉल्ट ऐप निर्यात करें;आउटपुट
आइए अब इसी उदाहरण को iOS में SafeAreaView की मदद से देखें।
उदाहरण:SafeAreaView की कार्यप्रणाली
नीचे दिए गए उदाहरण में हमने View घटक को SafeAreaView से बदल दिया है।
SafeViewArea के साथ काम करने के लिए आपको इसे निम्नानुसार आयात करना होगा -
'react-native' से आयात करें { SafeAreaView }; अब यदि आप आउटपुट देखते हैं तो आप देखेंगे कि टेक्स्ट घटक में पैडिंग जोड़ा गया है और अब यह स्टेटस बार को ओवरलैप नहीं करता है।
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आयात {शैलीपत्रक, पाठ, SafeAreaView} 'प्रतिक्रिया-मूल' से; const App =() => {वापसी (आउटपुट
