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** ஆகும், **camelCase** சொத்து பெயர்களுடன் (`backgroundColor`, `background-color` அல்ல); `StyleSheet.create` அவற்றை ஏற்பாடு செய்கிறது. நீங்கள் inline objects அல்லது styles இன் arrays ஐ pass செய்யலாம். ## 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 இலிருந்து வேறுபட்டிருக்கிறது, எனவே இது must-know செயல்பாட்ட அறிவு. React Native styles UIs ஐ **JavaScript objects** கொண்டு (`style` prop மூலம், `StyleSheet` உடன் ஏற்பாடு செய்யப்பட்டு) — CSS கோப்புகளுக்கு பதிலாக — மற்றும் இதை புரிந்துகொள்வது (**camelCase சொத்து பெயர்கள் போன்ற `backgroundColor`, styles ஐ JS objects ஆக வரையறுத்தல், arrays உடன் styles ஐ combine செய்தல்**) React Native component ஐ style செய்ய தேவையான ஆகும். **Flexbox-based layout system** ஐ புரிந்துகொள்வது குறிப்பாக முக்கியமாக இருக்கிறது: React Native Flexbox ஐப் பயன்படுத்துகிறது layout க்கு (CSS Flexbox போல, flexDirection, justifyContent, alignItems உடன்), ஆனால் முக்கிய வேறுபாடு என்னவென்றால் **flexDirection 'column' க்கு default ஆக வைக்கப்பட்டுள்ளது** (web இல் 'row' அல்ல) — குழப்பத்தின் பொதுவான புள்ளி. Flexbox என்பது முதன்மை layout mechanism ஆகும், எனவே இதை புரிந்துகொள்வது UIs ஐ ஏற்பாடு செய்வதற்கு அவசியமாக இருக்கிறது. **Web CSS இலிருந்து வேறுபாடுகளை** புரிந்துகொள்வது முக்கியமாக இருக்கிறது, குறிப்பாக web developers க்கு: CSS கோப்புகள்/classes க்கு பதிலாக camelCase உடன் JS objects, unitless numeric values, CSS சொத்துக்களின் 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 இல் தொடர்ந்து பயன்படுத்தப்படும் core skill.