React Native मा styling कसरी काम गर्छ?

Question

Accepted Answer

React Native styling ले **JavaScript objects** (CSS files होइन) प्रयोग गर्छ — `style` prop मार्फत लागू गरिन्छ, प्रायः `StyleSheet` सँग आयोजित गरिन्छ। यसले **Flexbox-based** layout system प्रयोग गर्छ। अवधारणाहरू 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 **JavaScript objects** हुन् **camelCase** property names (`backgroundColor`, `background-color` होइन); `StyleSheet.create` ले तिनीहरूलाई आयोजित गर्छ। तपाई inline objects वा styles को arrays पनि pass गर्न सक्नुहुन्छ। ## Flexbox layout (default) ```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 ले **JavaScript objects** (`style` prop द्वारा, `StyleSheet` सँग आयोजित) प्रयोग गरेर UIs को स्टाइल गर्छ — CSS files होइन — र यो बुझ्नु (`backgroundColor` जस्तो camelCase property names, styles JS objects को रूपमा परिभाषित गर्नु, arrays सँग styles एकत्रित गर्नु) कुनै पनि React Native component को स्टाइल गर्नको लागि आवश्यक छ। **Flexbox-based layout system** बुझ्नु विशेष रूपमा महत्त्वपूर्ण छ: React Native ले layout को लागि Flexbox प्रयोग गर्छ (CSS Flexbox जस्तो, flexDirection, justifyContent, alignItems सँग), तर मुख्य भिन्नता सहित कि **flexDirection ले 'column' को लागि default गर्छ** (web मा 'row' होइन) — भ्रम को सामान्य बिन्दु। Flexbox प्राथमिक layout तन्त्र हो, त्यसैले यो बुझ्नु UIs व्यवस्थित गर्नको लागि आवश्यक छ। **Web CSS देखि भिन्नताहरू** बुझ्नु महत्त्वपूर्ण छ विशेष गरी web developers को लागि: CSS files/classes को सट्टामा camelCase सँग JS objects, unitless numeric values, CSS properties को subset (web मा सबै कुरा छैन), column-default flexbox, र CSS जस्तो cascade/inheritance छैन (styles per-component हुन्) — यी भिन्नताहरू सामान्य stumbling blocks हुन् कि यो बुझ्नले स्पष्ट गर्छ। अवधारणाहरू CSS सँग मिल्छ् (web developers को लागि पहुँचयोग्य बनाइन्छ), syntax र केही व्यवहारहरू फरक हुन्छन्, त्यसैले React Native को विशिष्ट दृष्टिकोण बुझ्नु आवश्यक छ। Styling कुनै पनि UI निर्माणको लागि आवश्यक छ र React Native को JS-object, Flexbox-based दृष्टिकोण (web CSS देखि यसको भिन्नताहरू सँग) यो कसरी गरिन्छ, React Native मा styling बुझ्नु आवश्यक, आधारभूत व्यावहारिक ज्ञान हो — कुनै पनि React Native interface निर्माणको लागि आवश्यक, र web developers को लागि CSS देखि भिन्नताहरू बुझ्नको लागि महत्त्वपूर्ण, React Native UI development मा लगातार प्रयोग गरिने मुख्य कौशल।