छवियों को आपके रिएक्टिव नेटिव ऐप में जोड़ना आसान है। बिल्ट-इन इमेज कंपोनेंट के बारे में पूरी जानकारी प्राप्त करें।
छवियाँ मोबाइल एप्लिकेशन को बहुत अधिक मूल्य प्रदान करती हैं। वे अवधारणाओं को स्पष्ट करने, जानकारी देने, दृश्य रुचि पैदा करने और विशिष्ट सामग्री के लिए संदर्भ प्रदान करने में मदद कर सकते हैं, जिसे आप अपने ऐप उपयोगकर्ताओं को याद नहीं करना चाहते हैं।
प्रतिक्रियाशील मूल छवि घटक
रिएक्टिव नेटिव इमेज कंपोनेंट आपके मोबाइल ऐप्स में इमेज रेंडर करने के लिए रिएक्टिव नेटिव लाइब्रेरी द्वारा प्रदान किया गया डिफ़ॉल्ट कंपोनेंट है। घटक स्थानीय और दूरस्थ दोनों स्रोतों से छवियों को लोड कर सकता है। यह प्रदान की गई छवियों के अनुकूलन और स्टाइलिंग के लिए कई प्रॉप्स प्रदान करता है।
अपने एप्लिकेशन में छवि घटक का उपयोग करने के लिए, आयात करें छवि से प्रतिक्रिया देशी पुस्तकालय:
आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात { स्टाइलशीट, इमेज, व्यू} से'प्रतिक्रिया-मूल';कॉन्स्ट ऐप = () => {
वापस करना (
शैली = {शैलियाँ। छवि}
स्रोत = {ज़रूरत होना('./assets/my-image.jpg')}
/>
</View>
);
};
कॉन्स्ट शैलियाँ = StyleSheet.create ({
कंटेनर: {
मोड़ना: 1,
संरेखित आइटम: 'केंद्र',
औचित्य सामग्री: 'केंद्र',
},
छवि: {
चौड़ाई: 200,
ऊंचाई: 200,
सीमात्रिज्या: 100,
},
});
ऊपर एक साधारण है अनुप्रयोग एक छवि के साथ घटक। छवि घटक एक लेता है शैली प्रोप जो सेट करता है चौड़ाई, ऊंचाई, और BorderRadius छवि का। यह भी लेता है स्रोत प्रोप जो ऐप निर्देशिका के भीतर "संपत्ति" फ़ोल्डर में स्थित एक स्थानीय फ़ाइल से छवि को लोड करता है। स्रोत प्रोप छवि के पथ को शामिल करने के लिए परिभाषित करता है और स्थानीय और नेटवर्क / दूरस्थ छवि स्रोतों दोनों को स्वीकार कर सकता है।
स्थानीय छवियां उपयोगकर्ता के डिवाइस पर उपलब्ध हैं और आप उन्हें अस्थायी या स्थायी रूप से स्टोर कर सकते हैं। आप ऐप की प्रोजेक्ट डायरेक्टरी में स्थानीय छवियों को स्टोर कर सकते हैं, जैसे a संपत्ति फ़ोल्डर। आप ऐप की निर्देशिका के बाहर भी छवियों का पता लगा सकते हैं, जैसे डिवाइस के कैमरा रोल या फोटो लाइब्रेरी में। स्थानीय छवि के स्रोत पथ का एक उदाहरण यहां दिया गया है:
उरी: 'file:///path/to/my-image.jpg' }} />
नेटवर्क छवियां वेब के माध्यम से वितरित की जाती हैं। वे HTTP/HTTPS URL या बेस64-एन्कोडेड डेटा URI शामिल कर सकते हैं, जो बेस64 एन्कोडिंग योजना का उपयोग करके डेटा को सीधे URL में एम्बेड करते हैं।
छवि घटक को अनुकूलित करने के लिए सहारा
ऐसे कई प्रॉप्स हैं जिनका उपयोग आप रिएक्टिव नेटिव इमेज कंपोनेंट को स्टाइल और कस्टमाइज़ करने के लिए कर सकते हैं।
आकार बदलें
आकार बदलें प्रोप निर्धारित करता है कि रिएक्ट को अपने कंटेनर के भीतर एक छवि का आकार कैसे बदलना चाहिए और उसे कैसे स्थान देना चाहिए। के लिए कई उपलब्ध मान हैं आकार बदलें, जिनमें से प्रत्येक छवि को अलग तरह से प्रभावित करेगा।
- ढकना: यह मान छवि को समान रूप से स्केल करेगा ताकि दोनों आयाम इसके युक्त तत्व के बराबर या उससे अधिक हों। छवि तो कंटेनर के भीतर केंद्रित है। पक्षानुपात बनाए रखने के लिए इस मान का उपयोग करने से छवि को क्रॉप किया जा सकता है।
- रोकना: यह छवि को कंटेनर के आयामों के भीतर पूरी तरह से फिट और केंद्रित करने का प्रयास करेगा। हालाँकि, इसके परिणामस्वरूप छवि के किनारों के आसपास खाली जगह हो सकती है।
- खींचना: द खींचना पहलू अनुपात की परवाह किए बिना मान पूरे कंटेनर को भरने के लिए छवि को फैलाता है। जिससे कभी-कभी छवि विकृत हो जाती है।
- दोहराना: यह मान पूरे कंटेनर को भरने के लिए छवि को क्षैतिज और लंबवत दोनों तरह से दोहराता है।
- केंद्र: यह छवि को स्केल किए बिना कंटेनर तत्व के भीतर केंद्रित करेगा।
लदाई पर
यह है एक कॉलबैक फ़ंक्शन यह तब चलता है जब छवि लोड होना समाप्त हो जाती है। आप छवि लोड होने के बाद कार्रवाई करने के लिए इसका उपयोग कर सकते हैं, जैसे कि घटक की स्थिति को अपडेट करना या उपयोगकर्ता को संदेश प्रदर्शित करना।
onError
onError छवि लोड होने में विफल होने पर या जब भी प्रॉप चलेगा। छवि लोड करने का प्रयास करते समय कोई त्रुटि होने पर यह आवश्यक क्रियाएं करने का एक तरीका प्रदान करता है। आप उपयोगकर्ता को एक त्रुटि संदेश प्रदर्शित कर सकते हैं या छवि को लोड करने के लिए पुनः प्रयास कर सकते हैं।
डिफ़ॉल्ट स्रोत
यदि मुख्य छवि लोड करने में विफल रहती है तो यह प्रोप प्रदर्शित करने के लिए फ़ॉलबैक छवि निर्दिष्ट करता है। मुख्य छवि लोड होने के दौरान आप इसका उपयोग डिफ़ॉल्ट छवि या प्लेसहोल्डर छवि प्रदान करने के लिए कर सकते हैं।
एक एपीआई से दूरस्थ छवियों को संभालना
आपको एपीआई या रिमोट सर्वर से अपने एप्लिकेशन के लिए छवि प्राप्त करने और इसे अपने ऐप में प्रदर्शित करने की आवश्यकता हो सकती है। आप बिल्ट-इन रिएक्ट का उपयोग कर सकते हैं लाना समारोह या एक एपीआई एक्सियोस जैसी लाइब्रेरी का अनुरोध करता है इस उद्देश्य से।
यहां इसका एक उदाहरण दिया गया है कि रिमोट एपीआई का उपयोग करके किसी छवि को कैसे लाया और प्रदर्शित किया जाए लाना समारोह:
कॉन्स्ट [इमेजयूरी, सेटइमेजयूरी] = यूज़स्टेट (व्यर्थ);उपयोग प्रभाव (() => {
लाना(' https://example.com/api/images/1')
।तब(जवाब => प्रतिक्रिया.जेसन ())
।तब(आंकड़े => सेट इमेज यूरी (डेटा.यूआरएल))
।पकड़ना(गलती =>सांत्वना देनात्रुटि (त्रुटि));
}, []);
वापस करना (
{imageUri? (उरी: imageUri}} />
): (लोड हो रहा है...</Text>
)}
</View>
);
इस कोड को अपने ऐप के भीतर चलाने से सेट रिमोट एपीआई लिंक से एक छवि प्राप्त होगी। उदाहरण पहले के लिए एक राज्य चर बनाता है imageUri. इसके अंदर useEffect हुक, द लाना फ़ंक्शन इमेजयूरी को पुनर्प्राप्त करता है और इसे राज्य चर में उपयोग करके संग्रहीत करता है सेटइमेजयूरी ().
अंत में, यह प्रस्तुत करता है छवि के साथ घटक स्रोत प्रॉप इमेज के यूआरआई पर सेट होता है जबकि लोडिंग इंडिकेटर डिस्प्ले करता है, इमेज दिखाने का इंतजार करता है।
कैश व्यवहार को नियंत्रित करने के लिए कैश नीति प्रस्ताव का उपयोग करना
आपका ब्राउज़र उन छवियों को कैश कर सकता है जिन्हें वह दूरस्थ URL से लोड करता है, ताकि वह उन्हें भविष्य में जल्दी से फिर से लोड कर सके। आप का उपयोग करके कैश की गई छवि के व्यवहार को अनुकूलित कर सकते हैं कैश सहारा। यह प्रोप निर्दिष्ट कर सकता है कि ब्राउज़र को छवि को कैसे कैश करना चाहिए और उस कैश को कैसे अमान्य करना चाहिए।
कैश प्रोप जैसे मान ले सकता है डिफ़ॉल्ट, पुनः लोड, बल-कैश, और only-if-cached.
यहाँ कैसे उपयोग करने का एक उदाहरण है कैश एक छवि के कैश व्यवहार को नियंत्रित करने के लिए प्रोप:
स्रोत = {{
उरी: ' https://example.com/images/my-image.png',
कैश: 'बल-कैश',
कैशकी: 'मेरी छवि',
अपरिवर्तनीय: सत्य
}}
/>
कैश संपत्ति पर सेट है 'बल-कैश', जो इंगित करता है कि ब्राउज़र को छवि को कैश से लोड करना चाहिए यदि यह उपलब्ध है, भले ही वह कैश संस्करण पुराना हो।
एक नया सहारा cachekey यहां भी चल रहा है। यह सेट है 'मेरी छवि', जो एक कस्टम कैश कुंजी के रूप में काम करेगा जिसका उपयोग आप बाद में कैश की गई छवि को संदर्भित करने के लिए कर सकते हैं।
यह भी अडिग संपत्ति पर सेट है सत्य, जो ब्राउज़र को इस कैश प्रविष्टि को अपरिवर्तनीय मानने के लिए कहता है और इसे कभी भी अमान्य नहीं करता है।
छवियों के बारे में सब कुछ है
प्रतिक्रियाशील मूल छवि घटक छवियों को प्रदर्शित करने के लिए एक शक्तिशाली और लचीला साधन प्रदान करता है, जिसमें स्टाइलिंग, दूरस्थ छवियों को संभालना और कैश व्यवहार को नियंत्रित करना शामिल है।
दूरस्थ छवियों के लिए, जब आप दूरस्थ छवि लोड कर रहे हों तो आप हमेशा एक अस्थायी छवि या पाठ प्रदर्शित करने के लिए प्लेसहोल्डर का उपयोग कर सकते हैं। यह तत्काल दृश्य प्रतिक्रिया प्रदान करके और ऐप को अनुत्तरदायी दिखने से रोककर एक बेहतर उपयोगकर्ता अनुभव बनाएगा।