डेवलपर · लोकल उपयोगिता

React Native के लिए शैडो

React Native Shadow Generator

iOS शैडो और Android elevation सेट करें, पुराने shadow और नए boxShadow सिंटैक्स की तुलना करें, प्लेटफ़ॉर्म सीमाएँ देखें और तैयार स्टाइल कॉपी करें।

टास्क पथ / इनपुट से परिणाम तक

लक्ष्य प्लेटफ़ॉर्म चुनें

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

नेटिव कोडिंग रनटाइम

React Native के लिए शैडो

प्लेटफ़ॉर्म-स्पेसिफ़िक शैडो वैल्यू ट्यून करें और ब्राउज़र में तुरंत अनुमानित नतीजा देखें।

पैरामीटर

शैडो को आकार दें

वैल्यू सीमा में रखी जाती हैं

आउटपुट API

पुरानी प्रॉपर्टीज़नई आर्किटेक्चर: boxShadow

शैडो रंग#111827

ऑफ़सेट Xpx-100–100ऑफ़सेट Ypx-100–100ओपैसिटी0–1रेडियसpx0–100Elevation0–24

कोड जनरेशन प्लेटफ़ॉर्म

iOSAndroidदोनों

अनुमान

लाइव प्रीव्यू

दोनों

Toolarsनेटिव सरफ़ेस

ब्राउज़र की शैडो रेंडरिंग चुनी गई React Native प्लेटफ़ॉर्म का अनुमान है।

ऑफ़सेट: 0, 8
ओपैसिटी: 0.24
रेडियस: 16
Elevation: 8

आउटपुट

StyleSheet कोड

TypeScript

import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  card: {
    shadowColor: "#111827",
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.24,
    shadowRadius: 16,
    elevation: 8,
  },
});

डिफ़ॉल्ट शैडो तैयार है।

React Native के लिए शैडो कैसे काम करता है, निजता और संबंधित टूल

टास्क पथ / इनपुट से परिणाम तक

React Native शैडो कैसे बनाएं

01
लक्ष्य प्लेटफ़ॉर्म चुनें
पहले आउटपुट API चुनें: लेगेसी मोड प्लेटफ़ॉर्म के अनुसार iOS शैडो प्रॉपर्टी या Android elevation बनाता है, जबकि boxShadow समर्थित React Native New Architecture वाले Android 9+ के लिए एक बाहरी शैडो बनाता है। लेगेसी मोड में iOS, Android या दोनों चुनें; दोनों डिफ़ॉल्ट है।
02
iOS शैडो को आकार दें
शैडो रंग चुनें, फिर ऑफ़सेट X और ऑफ़सेट Y -100 से 100 px, ओपेसिटी 0.01 के चरणों में 0 से 1, और रेडियस 0 से 100 px सेट करें। रेंज से बाहर के मान अपने आप रेंज पर कस दिए जाते हैं, इसलिए आप बिना टूटा कोड बनाए मुफ़्ती से टाइप कर सकते हैं।
03
Android एलिवेशन सेट करें
एलिवेशन 0 से 24 समायोजित करें। Android शैडो ऑफ़सेट के बजाय एलिवेशन से आते हैं, इसलिए यह मान आउटपुट के Android हिस्से को चलाता है जबकि iOS नंबर उसे अछूता छोड़ते हैं। दोनों मोड में iOS कंट्रोल सक्रिय रहते हैं, ताकि स्निपेट के दोनों हिस्से साथ-साथ ट्यून हों।
04
लाइव पूर्वावलोकन जांचें
लाइव पूर्वावलोकन कार्ड चुने प्लेटफ़ॉर्म का ब्राउज़र box-shadow अनुमान रेंडर करता है, हर बदलाव के साथ अपडेट होता हुआ। नमूना लोड करें एक उठा हुआ नीला (indigo) उदाहरण डालता है, अगर आप सूक्ष्म डिफ़ॉल्ट से मज़बूत शुरुआती बिंदु चाहते हैं।
05
बना हुआ कोड कॉपी करें
StyleSheet स्निपेट को — toolars-react-native-shadow.ts के रूप में सहेजा हुआ — अपने प्रोजेक्ट में ले जाने के लिए कोड कॉपी करें या .ts डाउनलोड करें इस्तेमाल करें। दोबारा शुरू करना हो तो रीसेट डिफ़ॉल्ट शैडो वापस लाता है।

टूल के तथ्य

प्रोसेसिंग: आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है: कभी नहीं
रिटेंशन: कुछ भी स्टोर नहीं होता
कीमत: मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

React Native के लिए शैडो अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

React Native के लिए शैडो कब उपयोगी होता है

क्रॉस-प्लेटफ़ॉर्म स्टाइल

एक ही कॉम्पोनेंट स्टाइल में आने वाली iOS और Android प्रॉपर्टी जनरेट करें।

डिज़ाइन हैंडऑफ़

विज़ुअल शैडो के फ़ैसले को कॉपी-रेडी React Native कोड में बदलें।

तेज़ ट्यूनिंग

लाइव अनुमान के सामने डेप्थ, रंग, ओपेसिटी, रेडियस और ऑफ़सेट समायोजित करें।

React Native के लिए शैडो असल में क्या करता है

डिज़ाइन फ़ाइल में ऐसा कार्ड दिखता है जो ठीक-ठीक तैरता है, और अब उसे दो बार अस्तित्व में आना है: एक बार iOS शैडो प्रॉपर्टी के रूप में, एक बार Android एलिवेशन के रूप में। React Native शैडो जनरेटर लाइव अनुमान के सामने लुक डायल करने और सटीक StyleSheet ब्लॉक कॉपी करने देता है, हर अंदाज़े पर नंबर हाथ से ट्यून करने और ऐप दोबारा कंपाइल करने के बजाय। लेगेसी दोनों मोड एक ही स्निपेट में iOS शैडो प्रॉपर्टी और Android elevation जोड़ता है; अंतिम रंग और रूप हर डिवाइस पर अलग से जाँचें।

आम सवाल

जनरेटर कौन सा कोड बनाता है?

एक TypeScript स्निपेट जो react-native से StyleSheet इम्पोर्ट करता है और एकल card नियम वाला styles ऑब्जेक्ट एक्सपोर्ट करता है। iOS के लिए यह shadowColor, width और height वाला shadowOffset, shadowOpacity और shadowRadius देता है; Android के लिए elevation (सिर्फ़-Android मोड में shadowColor भी); दोनों में iOS प्रॉपर्टी और elevation साथ आते हैं।

डिफ़ॉल्ट मान क्या हैं?

डिफ़ॉल्ट शैडो दोनों प्लेटफ़ॉर्म को टारगेट करता है, रंग #111827, ऑफ़सेट X पर 0, ऑफ़सेट Y पर 8 px, ओपेसिटी पर 0.24, रेडियस पर 16 px और एलिवेशन पर 8 — ठीक वही जो वर्कस्पेस पहली बार खुलने पर दिखता है। रीसेट इन्हीं मानों पर लौटता है, और नमूना लोड करें ज़्यादा ऑफ़सेट व रेडियस पर मज़बूत नीला (indigo) प्रीसेट लाता है।

कौन से रंग फ़ॉर्मैट स्वीकार होते हैं?

छह-अंकीय hex मान जैसे #111827। जो मान्य hex रंग नहीं है वह आउटपुट तोड़ने के बजाय डिफ़ॉल्ट पर लौट जाता है, और मान्य मान बने हुए कोड में बड़े अक्षरों में नॉर्मलाइज़ होते हैं।

क्या पूर्वावलोकन ठीक वही है जो डिवाइस दिखाएगा?

नहीं, और पूर्वावलोकन कार्ड यह कहता भी है: ब्राउज़र चुने प्लेटफ़ॉर्म का box-shadow अनुमान रेंडर करता है, जो सेटिंग्स की तुलना के लिए काफ़ी है लेकिन पिक्सल-परफ़ेक्ट मेल नहीं। iOS और दोनों मोड में यह आपके ऑफ़सेट, रेडियस, रंग और ओपेसिटी की नकल करता है; Android मोड में यह एलिवेशन उठान का दिखावा करता है, क्योंकि ब्राउज़र में एलिवेशन की अवधारणा नहीं है। अंतिम लुक हमेशा असली डिवाइस या एमुलेटर पर पुष्ट करें।

कौन सी मान रेंज स्वीकार होती हैं?

ऑफ़सेट X और ऑफ़सेट Y -100 से 100 px, ओपेसिटी 0.01 के चरणों में 0 से 1, रेडियस 0 से 100 px, और एलिवेशन 0 से 24। रेंज से बाहर की एंट्री टूटा कोड बनाने के बजाय नज़दीकी मान्य मान पर कस दी जाती हैं।

क्या मेरी सेटिंग्स अपलोड या स्टोर होती हैं?

नहीं। कोड इस टैब में लोकल रूप से बनता है, कोई शैडो सेटिंग स्टोर या कहीं नहीं भेजी जाती, और किसी खाते की ज़रूरत नहीं।

नया boxShadow मोड कब चुनना चाहिए?

इसे तब इस्तेमाल करें जब आपका ऐप React Native न्यू आर्किटेक्चर इस्तेमाल करता हो और आपका Android लक्ष्य 9 या बाद का हो। यह मोड बिना elevation के एक outset शैडो एक्सपोर्ट करता है। पुराने सेटअप के लिए लिगेसी प्लेटफ़ॉर्म प्रॉपर्टी पर बने रहें। ब्लर रेडियस और लिगेसी शैडो रेडियस पिक्सल-समान माइग्रेशन नहीं हैं; बनी हुई स्टाइल अपने नेटिव ऐप में जांचें।

डेवलपर में जारी रखें

React Native के लिए शैडो

React Native के लिए शैडो

शैडो को आकार दें

लाइव प्रीव्यू

StyleSheet कोड

React Native शैडो कैसे बनाएं

लक्ष्य प्लेटफ़ॉर्म चुनें

iOS शैडो को आकार दें

Android एलिवेशन सेट करें

लाइव पूर्वावलोकन जांचें

बना हुआ कोड कॉपी करें

टूल के तथ्य

आपका इनपुट ब्राउज़र में ही रहता है।

लोकल एक्ज़ीक्यूशन

कोई छिपी प्रोसेसिंग नहीं

खाते की ज़रूरत नहीं

तुरंत रीसेट

React Native के लिए शैडो कब उपयोगी होता है

क्रॉस-प्लेटफ़ॉर्म स्टाइल

डिज़ाइन हैंडऑफ़

तेज़ ट्यूनिंग

React Native के लिए शैडो असल में क्या करता है

संबंधित काम, कोई बंद गली नहीं।

कोड से इमेज

URL स्लग जनरेटर

Base64 एन्कोडर/डिकोडर

HTML एन्कोडर/डिकोडर

React Native के लिए शैडो

शैडो को आकार दें

लाइव प्रीव्यू

StyleSheet कोड