React Native માં styling કેવી રીતે કામ કરે છે?

Question

Accepted Answer

React Native styling **JavaScript objects** (CSS ફાઈલો નહીં) વાપરે છે — `style` prop મારફતે લાગુ કરવામાં આવે છે, ઘણીવાર `StyleSheet` સાથે સંગઠિત કરવામાં આવે છે. તે **Flexbox-આધારિત** લેઆઉટ સિસ્ટમ વાપરે છે. ખ્યાલો CSS જેવા છે પરંતુ JavaScript સિન્ટેક્સ સાથે અને કેટલાક તફાવતો છે. ## 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 નામો સાથે (`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 ફાઈલો આવલે નહીં — અને આ સમજવું (`backgroundColor` જેવા camelCase property નામો, styles JS objects તરીકે વ્યાખ્યાયિત કરવું, arrays સાથે styles એકીભૂત કરવું) કોઈપણ React Native component ને style કરવા માટે આવશ્યક છે. **Flexbox-આધારિત લેઆઉટ સિસ્ટમ** સમજવું ખાસ મહત્વપૂર્ણ છે: React Native લેઆઉટ માટે Flexbox વાપરે છે (web Flexbox જેવું, flexDirection, justifyContent, alignItems સાથે), પરંતુ મુખ્ય તફાવત સાથે કે **flexDirection ડિફોલ્ટ રૂપે 'column'** (web પર 'row' નહીં) — એક સામાન્ય મૂંઝવણ નો બિંદુ. Flexbox પ્રાથમિક લેઆઉટ મિકેનિઝમ છે, તેથી તેને સમજવું UIs ગોઠવવા માટે આવશ્યક છે. **Web CSS થી તફાવતો** સમજવું મહત્વપૂર્ણ છે ખાસ કરીને web developers માટે: CSS ફાઈલો/classes ને બદલે JS objects camelCase સાથે, unitless numeric values, CSS properties ની subset (web પાસે બધું નથી), column-default flexbox, અને CSS જેવી cascade/inheritance નથી (styles per-component છે) — આ તફાવતો સામાન્ય અડચણો છે જે સમજવું સ્પષ્ટ કરે છે. ખ્યાલો web CSS સાથે સમાન હોવાથી (તે web developers માટે approachable બનાવે છે), સિન્ટેક્સ અને કેટલું વર્તન અલગ છે, તેથી React Native ના ચોક્કસ અભિગમ સમજવું આવશ્યક છે. Styling કોઈપણ UI બનાવવા માટે આવશ્યક છે અને React Native ની JS-object, Flexbox-આધારિત અભિગમ (તેના web CSS થી તફાવતો સાથે) કેવી રીતે છે, તેથી React Native માં styling સમજવું આવશ્યક છે, મૌલિક વ્યવહારિક જ્ઞાન — કોઈપણ React Native interface બનાવવા માટે જરૂરી છે, અને web developers માટે CSS થી તફાવતો સમજવા માટે મહત્વપૂર્ણ છે, એક મુખ્ય કૌશલ્ય React Native UI development માં મતલબ વાપર્યું જાય છે.