React Native లో styling ఎలా పనిచేస్తుంది?

Question

Accepted Answer

React Native styling **JavaScript objects** ను ఉపయోగిస్తుంది (CSS ఫైల్‌లు కాదు) — `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** (`backgroundColor`, `background-color` కాదు) కోసం **camelCase** property names; `StyleSheet.create` వాటిని సంస్థాపిస్తుంది. మీరు inline objects లను లేదా styles ల arrays ను కూడా పాస్ చేయవచ్చు. ## 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 CSS ఫైల్‌ల కంటే **JavaScript objects** లతో UIs ను styling చేస్తుంది (`style` prop ద్వారా, `StyleSheet` తో సంస్థాపించబడినవి) — మరియు ఇది అర్థం చేసుకోవడం (`backgroundColor` వంటి camelCase property names, JS objects లుగా styles ని నిర్వచించడం, arrays తో styles ని కలపడం) ఏ React Native component ను styling చేయటానికీ అవసరమైనది. **Flexbox-based layout system** ను అర్థం చేసుకోవడం ప్రత్యేకంగా ముఖ్యమైనది: React Native layout కోసం Flexbox ను ఉపయోగిస్తుంది (CSS Flexbox లాగా, flexDirection, justifyContent, alignItems తో), కానీ కీ తేడా ఏమిటంటే **flexDirection 'column' కు defaults** (web లో 'row' కాదు) — ఇది గందరగోళం యొక్క సాధారణ బిందువు. Flexbox ప్రాధమిక layout mechanism, కనుక దానిని అర్థం చేసుకోవడం UIs ని ఏర్పాటు చేయటానికీ అవసరమైనది. **Web CSS నుండి తేడాలు** అర్థం చేసుకోవడం ముఖ్యమైనది ప్రత్యేకంగా web developers కోసం: CSS ఫైల్‌ల/classes కంటే camelCase తో JS objects, unitless numeric values, CSS properties యొక్క subset (web కు సంబంధించి ప్రతిదీ కాదు), column-default flexbox, మరియు CSS లాగా cascade/inheritance లేనిది (styles ఒక-component కోసం) — ఈ తేడాలు సాధారణ stumbling blocks లు, అవి అర్థం చేసుకోవడం స్పష్టం చేస్తాయి. Concepts CSS ని పోలి ఉంటాయి (web developers కోసం approach చేయటానికి సులభమైనది), syntax మరియు కొన్ని behaviors భిన్నంగా ఉంటాయి, కనుక React Native యొక్క నిర్దిష్ట approach ని అర్థం చేసుకోవడం అవసరమైనది. Styling ఏ UI ను రూపొందించటానికీ అవసరమైనది మరియు React Native యొక్క JS-object, Flexbox-based approach (దాని web CSS నుండి తేడాలతో) ఎలా చేయవచ్చూ ఉందో, React Native లో styling ని అర్థం చేసుకోవడం అవసరమైనది, ప్రాథమిక practical జ్ఞానం — ఏ React Native interface ను రూపొందించటానికీ అవసరమైనది, మరియు web developers కు CSS నుండి తేడాలను అర్థం చేసుకోవడం ముఖ్యమైనది, React Native UI development లో నిరంతరం ఉపయోగించే core skill.