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** ਹਨ **camelCase** property names ਦੇ ਨਾਲ (`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 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 ਵਿੱਚ ਲਗਾਤਾਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।