React Native styling JavaScript objects ਵਰਤਦੀ ਹੈ (CSS files ਨਹੀਂ) — style prop ਰਾਹੀਂ ਲਾਗੂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਅਕਸਰ StyleSheet ਨਾਲ ਸੰਗਠਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ Flexbox-based layout system ਵਰਤਦੀ ਹੈ। ਇਹ ਸੰਕਲਪ CSS ਜਿਵੇਂ ਹਨ ਪਰ JavaScript syntax ਅਤੇ ਕੁਝ ਅੰਤਰਾਂ ਦੇ ਨਾਲ।
{ , , } ;
() {
(
);
}
styles = .({
: {
: ,
: ,
: ,
},
: {
: ,
: ,
: ,
},
});
Styles JavaScript objects ਹਨ camelCase property names ਦੇ ਨਾਲ (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 ਤੋਂ ਵੱਖਰਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਲਾਜ਼ਮੀ ਵਿਹਾਰਕ ਗਿਆਨ ਹੈ।
React Native styles UIs ਨੂੰ JavaScript objects ਨਾਲ (style prop ਰਾਹੀਂ, StyleSheet ਨਾਲ ਸੰਗਠਿਤ) CSS files ਦੀ ਥਾਂ — ਅਤੇ ਇਹ ਸਮਝਣਾ (camelCase property names ਜਿਵੇਂ backgroundColor, styles ਨੂੰ JS objects ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ, arrays ਨਾਲ styles ਨੂੰ ਜੋੜਨਾ) ਕਿਸੇ ਵੀ React Native component ਨੂੰ style ਕਰਨ ਲਈ ਲਾਜ਼ਮੀ ਹੈ।
Flexbox-based layout system ਨੂੰ ਸਮਝਣਾ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਹੈ: React Native layout ਲਈ Flexbox ਵਰਤਦਾ ਹੈ (CSS Flexbox ਵਾਂਗ, flexDirection, justifyContent, alignItems ਦੇ ਨਾਲ), ਪਰ ਇਸ ਮੁੱਖ ਅੰਤਰ ਦੇ ਨਾਲ ਕਿ flexDirection ਆਪਣੇ ਆਪ '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 ਹਨ) — ਇਹ ਅੰਤਰ ਆਮ stumbling blocks ਹਨ ਜੋ ਸਮਝਣ ਨਾਲ ਸਪਸ਼ਟ ਹੋ ਜਾਂਦੇ ਹਨ।
ਹਾਲਾਂਕਿ ਸੰਕਲਪ 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 ਵਿੱਚ ਲਗਾਤਾਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ