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** ہوتے ہیں جن کے property names **camelCase** میں ہوتے ہیں (`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 UIs کو CSS files کے بجائے **JavaScript objects** کے ساتھ style کرتا ہے (`style` prop کے ذریعے، `StyleSheet` کے ساتھ منظم) — اور اسے سمجھنا (camelCase property names جیسے `backgroundColor`، styles کو JS objects کے طور پر define کرنا، arrays کے ساتھ styles کو ملانا) کسی بھی React Native component کو style کرنے کے لیے ضروری ہے۔ **Flexbox-based layout system** کو سمجھنا خاص طور پر اہم ہے: React Native layout کے لیے Flexbox استعمال کرتا ہے (CSS Flexbox کی طرح، flexDirection, justifyContent, alignItems کے ساتھ)، لیکن اس اہم فرق کے ساتھ کہ **flexDirection کا default 'column' ہوتا ہے** (نہ کہ web کی طرح 'row') — یہ ایک عام الجھن کا نقطہ ہے۔ Flexbox بنیادی layout mechanism ہے، اس لیے اسے سمجھنا 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 ہوتے ہیں) — یہ فرق عام رکاوٹیں ہیں جنہیں سمجھنا واضح کر دیتا ہے۔ اگرچہ تصورات CSS سے مشابہت رکھتے ہیں (جو اسے web developers کے لیے قابلِ رسائی بناتا ہے)، syntax اور کچھ behaviors مختلف ہیں، اس لیے 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 میں مسلسل استعمال ہوتی ہے۔