React Native में styling कैसे काम करती है?

Question

Accepted Answer

React Native styling **JavaScript objects** का उपयोग करती है (CSS files नहीं) — जो `style` prop के माध्यम से लागू किए जाते हैं, अक्सर `StyleSheet` के साथ व्यवस्थित किए जाते हैं। यह एक **Flexbox-आधारित** layout system का उपयोग करता है। concepts CSS से मिलते-जुलते हैं लेकिन JavaScript syntax और कुछ अंतरों के साथ। ## JavaScript objects के साथ styling ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Styles **camelCase** property नामों के साथ **JavaScript objects** हैं (`backgroundColor`, न कि `background-color`); `StyleSheet.create` उन्हें व्यवस्थित करता है। आप inline objects या styles के arrays भी पास कर सकते हैं। ## Flexbox layout (डिफ़ॉल्ट) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Web CSS से अंतर ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## यह क्यों महत्वपूर्ण है React Native में styling समझना मूलभूत है क्योंकि **styling किसी भी UI को बनाने के लिए आवश्यक है**, और React Native का दृष्टिकोण web CSS से भिन्न है, इसलिए यह अवश्य-जानने योग्य व्यावहारिक ज्ञान है। React Native CSS files के बजाय **JavaScript objects** के साथ UIs को style करता है (`style` prop के माध्यम से, `StyleSheet` के साथ व्यवस्थित) — और इसे समझना (camelCase property नाम जैसे `backgroundColor`, styles को JS objects के रूप में परिभाषित करना, arrays के साथ styles को संयोजित करना) किसी भी React Native component को style करने के लिए आवश्यक है। **Flexbox-आधारित layout system** समझना विशेष रूप से महत्वपूर्ण है: React Native layout के लिए Flexbox का उपयोग करता है (CSS Flexbox की तरह, flexDirection, justifyContent, alignItems के साथ), लेकिन मुख्य अंतर के साथ कि **flexDirection डिफ़ॉल्ट रूप से 'column' होता है** (न कि web पर 'row' की तरह) — भ्रम का एक आम बिंदु। Flexbox प्राथमिक layout mechanism है, इसलिए UIs को व्यवस्थित करने के लिए इसे समझना आवश्यक है। **Web CSS से अंतर** समझना विशेष रूप से web developers के लिए महत्वपूर्ण है: CSS files/classes के बजाय camelCase के साथ JS objects, unitless संख्यात्मक मान, CSS properties का एक subset (वह सब कुछ नहीं जो web में है), column-default flexbox, और CSS जैसी कोई cascade/inheritance नहीं (styles per-component हैं) — ये अंतर आम बाधाएँ हैं जिन्हें समझना स्पष्ट करता है। हालाँकि concepts CSS से मिलते-जुलते हैं (इसे web developers के लिए सुलभ बनाते हुए), syntax और कुछ behaviors भिन्न हैं, इसलिए React Native के विशिष्ट दृष्टिकोण को समझना आवश्यक है। चूँकि styling किसी भी UI को बनाने के लिए आवश्यक है और React Native का JS-object, Flexbox-आधारित दृष्टिकोण (web CSS से इसके अंतरों के साथ) यह कैसे किया जाता है, React Native में styling समझना आवश्यक, मूलभूत व्यावहारिक ज्ञान है — किसी भी React Native interface को बनाने के लिए आवश्यक, और web developers के लिए CSS से अंतरों को समझने के लिए महत्वपूर्ण, एक मुख्य skill जो React Native UI development में लगातार उपयोग की जाती है।