React Native styling JavaScript objectsஐப் பயன்படுத்துகிறது (CSS கோப்புகளை அல்ல) — style prop மூலம் பயன்படுத்தப்பட்டு, பெரும்பாலும் StyleSheet உடன் ஏற்பாடு செய்யப்படுகிறது. இது Flexbox-based layout system ஐப் பயன்படுத்துகிறது. கருத்துக்கள் CSS போன்றதாகத் தெரியும் ஆனால் JavaScript syntax உடன் மற்றும் சில வேறுபாடுகள் உண்டு.
{ , , } ;
() {
(
);
}
styles = .({
: {
: ,
: ,
: ,
},
: {
: ,
: ,
: ,
},
});
Styles என்பவை JavaScript objects ஆகும், camelCase சொத்து பெயர்களுடன் (backgroundColor, background-color அல்ல); StyleSheet.create அவற்றை ஏற்பாடு செய்கிறது. நீங்கள் inline objects அல்லது styles இன் arrays ஐ pass செய்யலாம்.
// React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults
// to 'column', not 'row')
<View style={{
flex: 1,
flexDirection: 'row', // 'column' (default) or 'row'
justifyContent: 'center', // main-axis alignment
alignItems: 'center', // cross-axis alignment
}}>
✓ 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.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை