તમે React Native માં પ્લેટફોર્મ-સ્પષ્ટ કોડ કેવી રીતે લખો છો?

Question

Accepted Answer

જ્યારે React Native એ iOS અને Android પર મોટાભાગનો કોડ શેર કરે છે, કેટલીકવાર તમને **પ્લેટફોર્મ-સ્પષ્ટ** કોડ અથવા સ્ટાઇલિંગની જરૂર હોય છે — વિવિધ પ્લેટફોર્મ વર્તણૂક, ડિજાઇન્સ, અથવા ક્ષમતાઓ માટે. React Native આ માટે **Platform** મોડ્યુલ અને પ્લેટફોર્મ-સ્પષ્ટ ફાઇલ એક્સટેંશન્સ પ્રદાન કરે છે.

## Platform મોડ્યુલ

```jsx
import { Platform } from 'react-native';

// check the current platform
if (Platform.OS === 'ios') { /* iOS-specific */ }
else if (Platform.OS === 'android') { /* Android-specific */ }

// Platform.select — pick a value per platform
const styles = {
  padding: Platform.OS === 'ios' ? 20 : 16,
  ...Platform.select({
    ios: { fontFamily: 'Helvetica' },
    android: { fontFamily: 'Roboto' },
  }),
};
```

`Platform.OS` પ્લેટફોર્મ તપાસે છે; `Platform.select` દરેક પ્લેટફોર્મ માટે મૂલ્યો પસંદ કરે છે — શરતી વર્તણૂક અને સ્ટાઇલિંગ માટે.

## પ્લેટફોર્મ-સ્પષ્ટ ફાઇલો

```text
→ Create separate files per platform using extensions:
  Button.ios.js   → used on iOS
  Button.android.js → used on Android
  import Button from './Button'   → RN automatically picks the right file per platform
→ Good for substantially different platform implementations (cleaner than lots of if-checks)
```

## તેનો ઉપયોગ ક્યારે અને કેવી રીતે કરવો

```text
✓ Use platform-specific code SPARINGLY — share code by default; diverge only when needed
✓ Common reasons: platform design conventions (iOS vs Material), platform-specific
  features/APIs, behavior differences, platform-appropriate UX
✓ Platform module for small differences; .ios/.android files for large differences
✓ Test on BOTH platforms (a feature working on one may differ/break on the other)
```

## તે શા માટે મહત્વપૂર્ણ છે

પ્લેટફોર્મ-સ્પષ્ટ કોડ કેવી રીતે લખવું તે સમજવું મૂલ્યવાન છે કારણ કે **ક્રસ-પ્લેટફોર્મ એપ્લિકેશન્સને કેટલીકવાર પ્લેટફોર્મ-સ્પષ્ટ વર્તણૂક અથવા સ્ટાઇલિંગની જરૂર હોય છે**, તેથી તેને યોગ્યરીતે સંભાળવું વાસ્તવિક React Native એપ્લિકેશન્સ માટે ઉપયોગી વ્યવહારિક જ્ઞાન છે.

જ્યારે React Native નું મૂલ્ય iOS અને Android પર મોટાભાગનો કોડ શેર કરવાનું છે, વાસ્તવિક એપ્લિકેશન્સને કેટલીકવાર દરેક પ્લેટફોર્મ પર **અલગ થવાની જરૂર હોય છે** — પ્લેટફોર્મ ડિજાઇન સંમેલનો (iOS વર્સેસ Android/Material સૌંદર્યશાસ્ત્ર), પ્લેટફોર્મ-સ્પષ્ટ ફીચર્સ અથવા APIs, વર્તણૂક તફાવતો, અથવા પ્લેટફોર્મ-યોગ્ય UX માટે — અને તેને સંભાળવા તે સમજવું મહત્વપૂર્ણ છે.

**Platform મોડ્યુલ** (`Platform.OS` પ્લેટફોર્મ તપાસવા અને `Platform.select` પ્રત્યેક પ્લેટફોર્મ માટે મૂલ્યો પસંદ કરવા માટે) નાના તફાવતોને ઇનલાઇન સંભાળે છે — શરતી વર્તણૂક અને સ્ટાઇલિંગ. **પ્લેટફોર્મ-સ્પષ્ટ ફાઇલો** (`.ios.js` અને `.android.js` એક્સટેંશ્નો વાપરીને, React Native આપોઆપ યોગ્ય ફાઇલ પસંદ કરે છે) મોટા તફાવતોને સ્વચ્છતાથી સંભાળે છે (ઘણી શરતાઓ માટે પરિવર્તનો કરવાને બદલે અલગ અમલીકરણો).

આ ક્યારે અને કેવી રીતે વાપરવું તે સમજવું સારા ચુકાદાને પ્રતિબિંબિત કરે છે: પ્લેટફોર્મ-સ્પષ્ટ કોડ **ક્ષણસ્વલ્પ** વાપરવું (ડિફોલ્ટ દ્વારા કોડ શેર કરવું અને માત્ર વાસ્તવમાં જરૂરી હોય ત્યારે અલગ થવું — React Native ના ક્રસ-પ્લેટફોર્મ લાભ સુરક્ષિત રાખવું), નાના તફાવતો માટે Platform મોડ્યુલ પસંદ કરવું વર્સેસ મોટા તફાવતો માટે પ્લેટફોર્મ-સ્પષ્ટ ફાઇલો, અને નિર્ણાયક રીતે **બંને પ્લેટફોર્મ્સ પર પરીક્ષણ કરવું** (કારણ કે એક પર કામ કરતી ફીચર અલગ હોઈ શકે છે અથવા બીજા પર તૂટી શકે છે — એક સામાન્ય વાસ્તવિક મુશ્કેલી).

યો સુસંતુલિત અભિગમ (ડિફોલ્ટ દ્વારા શેર કરો, જરૂર હોય તો વિચારપૂર્વક અલગ થો, બંને પરીક્ષણ કરો) પરિપક્વ ક્રસ-પ્લેટફોર્મ વિકાસ પ્રતિબિંબિત કરે છે.

ક્રસ-પ્લેટફોર્મ એપ્લિકેશન્સને કેટલીકવાર વૈધ રીતે પ્લેટફોર્મ-સ્પષ્ટ કોડ જરૂર હોય છે (સંમેલનો, ફીચર્સ, અથવા UX માટે) અને તેને સારી રીતે સંભાળવું (યોગ્ય સાધનો ક્ષણસ્વલ્પ વાપર્યા, બંને-પ્લેટફોર્મ પરીક્ષણ સાથે) ગુણવત્તાવાળી એપ્લિકેશન્સ માટે મહત્વપૂર્ણ છે, અને Platform મોડ્યુલ અને પ્લેટફોર્મ-સ્પષ્ટ ફાઇલો સમજવું આ સક્ષમ કરે છે કારણ કે, તમને React Native માં પ્લેટફોર્મ-સ્પષ્ટ કોડ કેવી રીતે લખવું તે સમજવું મૂલ્યવાન છે, વ્યવહારમાં સંબંધિત જ્ઞાન છે — વાસ્તવિક એપ્લિકેશન્સમાં આવતી પ્લેટફોર્મ તફાવતોને સંભાળવા માટે ઉપયોગી જ્યારે React Native મૂલ્યવાન બનાવતા ક્રસ-પ્લેટફોર્મ કોડ-શેરિંગ સુરક્ષિત રાખો છો, વિચારશીલ ક્રસ-પ્લેટફોર્મ વિકાસ પ્રતિબિંબિત કરે છે.