StyleSheet — यह क्या है, React Native में स्टाइल बनाना

StyleSheet क्या है?

StyleSheet — कंपोनेंट स्टाइल परिभाषित करने के लिए एक अंतर्निहित React Native API। वेब डेवलपमेंट में CSS के विपरीत, RN स्टाइल का वर्णन करने के लिए JavaScript ऑब्जेक्ट का उपयोग करता है। StyleSheet.create — मुख्य विधि — एक स्टाइल ऑब्जेक्ट स्वीकार करती है और संख्यात्मक पहचानकर्ताओं के साथ एक ऑब्जेक्ट लौटाती है।

StyleSheet React Native कोर का हिस्सा है और अतिरिक्त पैकेज स्थापित करने की आवश्यकता नहीं है। Meta (2026) के अनुसार, 95% React Native प्रोजेक्ट स्थिर स्टाइल के लिए StyleSheet.create का उपयोग करते हैं। विकल्प: styled-components, Emotion, NativeWind (RN के लिए Tailwind) — लेकिन अंतर्निहित StyleSheet कोर के लिए मानक बना हुआ है।

इतिहास और विकास

React Native (2015) के शुरुआती संस्करणों में, स्टाइल विशेष रूप से इनलाइन ऑब्जेक्ट के रूप में परिभाषित किए गए थे। StyleSheet.create RN 0.4 में अनुकूलन के रूप में दिखाई दिया। अवधारणा CSS से ली गई है: पठनीयता और प्रदर्शन के लिए स्टाइल को तर्क से अलग करें। वर्षों में, API का विस्तार हुआ: absoluteFill, hairlineWidth, flatten जोड़े गए।

StyleSheet.create बनाम इनलाइन स्टाइल

StyleSheet.create और इनलाइन स्टाइल के बीच अंतर प्रदर्शन के लिए महत्वपूर्ण है। इनलाइन स्टाइल एक सामान्य JavaScript ऑब्जेक्ट है जो कंपोनेंट के हर रेंडर पर बनता है। StyleSheet.create — एक ऑब्जेक्ट जो मॉड्यूल लोड के दौरान एक बार बनता है और संख्यात्मक ID में परिवर्तित होता है।

इनलाइन स्टाइल पास करते समय, React Native हर बार पूरे ऑब्जेक्ट को JavaScript-Native ब्रिज के माध्यम से भेजता है। जटिल स्टाइल वाले कंपोनेंट के लिए, इसका मतलब हर रेंडर पर दर्जनों गुण स्थानांतरित होते हैं। StyleSheet.create केवल एक संख्यात्मक पहचानकर्ता पास करता है, ब्रिज लोड को कम करता है।

// StyleSheet.create — अनुकूलित दृष्टिकोण
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// इनलाइन स्टाइल — हर रेंडर पर एक नया ऑब्जेक्ट बनाता है
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

इनलाइन कब उपयोग करें: स्थिति पर निर्भर गतिशील स्टाइल के लिए (दबाया गया, चुना गया, सक्रिय)। स्थिर स्टाइल के लिए, हमेशा StyleSheet.create का उपयोग करें। नियम: स्थिर → create, गतिशील → इनलाइन फ़ंक्शन।

StyleSheet के साथ Flexbox लेआउट

Flexbox — React Native में एकमात्र लेआउट तंत्र (CSS Grid समर्थित नहीं है, float अनुपस्थित है)। StyleSheet.create का उपयोग फ्लेक्स कंटेनर और उनके चाइल्ड तत्वों का वर्णन करने के लिए किया जाता है। मुख्य गुण: flex (भराव गुणांक), flexDirection (row | column), justifyContent, alignItems।

डिफ़ॉल्ट रूप से, React Native में flexDirection column है (CSS में — row)। वेब डेवलपमेंट से स्विच करते समय यह पहली बात याद रखनी चाहिए। सभी View कंपोनेंट डिफ़ॉल्ट रूप से फ्लेक्स कंटेनर हैं। किसी तत्व को केंद्रित करने के लिए, alignItems: 'center' + justifyContent: 'center' का उपयोग करें।

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

महत्वपूर्ण: React Native में, सभी आकार बिना इकाइयों के निर्दिष्ट किए जाते हैं (केवल संख्या)। प्रतिशत काम करते हैं लेकिन केवल माता-पिता के सापेक्ष चौड़ाई और ऊंचाई के लिए। margin और padding संख्याएँ स्वीकार करते हैं। प्रतिक्रियाशीलता के लिए, प्रतिशत के बजाय flex का उपयोग करें — यह विभिन्न स्क्रीनों पर अधिक विश्वसनीय है।

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API में create के अलावा कई विधियाँ शामिल हैं। StyleSheet.flatten स्टाइल की एक सरणी को एक ऑब्जेक्ट में मर्ज करता है — रचना और तृतीय-पक्ष कंपोनेंट में स्टाइल पास करने के लिए उपयोगी। StyleSheet.hairlineWidth डिवाइस पर न्यूनतम दृश्य रेखा चौड़ाई लौटाता है।

StyleSheet.absoluteFill — एक पूर्वनिर्धारित स्टाइल { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }। ओवरले परतों, मोडल विंडो और पूरी स्क्रीन पर पूर्ण स्थिति के लिए उपयोग किया जाता है। StyleSheet.absoluteFillObject — वही लेकिन विस्तार के लिए ऑब्जेक्ट के रूप में।

// flatten — स्टाइल मर्ज करें
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — न्यूनतम रेखा
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth विभाजक और सीमाओं के लिए उपयोगी है — यह स्क्रीन घनत्व की परवाह किए बिना हमेशा 1 भौतिक पिक्सेल जैसा दिखता है। Retina डिस्प्ले पर यह 0.5 लॉजिकल पॉइंट है, सामान्य पर — 1 पॉइंट। उन तत्वों के लिए hairlineWidth का उपयोग न करें जो सख्ती से एक विशिष्ट आकार के होने चाहिए।

Dimensions API के साथ रिस्पॉन्सिव लेआउट

Dimensions API का उपयोग StyleSheet के साथ विभिन्न स्क्रीन आकारों के लिए रिस्पॉन्सिव लेआउट के लिए किया जाता है। Dimensions.get('window') विंडो की चौड़ाई और ऊंचाई लौटाता है। स्क्रीन रोटेशन पर रिएक्टिव अपडेट के लिए, React Native से useWindowDimensions हुक का उपयोग करें।

हालांकि StyleSheet.create CSS की तरह मीडिया क्वेरी का समर्थन नहीं करता, आप create के अंदर Dimensions के आधार पर मानों की गणना कर सकते हैं या फ़ंक्शन के माध्यम से गतिशील स्टाइल का उपयोग कर सकते हैं। ब्रेकपॉइंट के लिए, विभिन्न चौड़ाई श्रेणियों के लिए अलग स्टाइल बनाएं।

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions स्क्रीन रोटेशन और Split View वाले टैबलेट पर विंडो आकार बदलने पर स्वचालित रूप से अपडेट होता है। SSR (React Native Web) के लिए, सुनिश्चित करें कि सर्वर और क्लाइंट के बीच विसंगतियों से बचने के लिए कंपोनेंट माउंट होने के बाद Dimensions.get कॉल किया जाए।

प्रोजेक्ट में स्टाइल का संगठन

StyleSheet संगठन प्रोजेक्ट में रखरखाव और कोड पुन: उपयोग को प्रभावित करता है। तीन दृष्टिकोण: कंपोनेंट के अंदर स्थानीय स्टाइल (कंपोनेंट के बगल में styles.js), वैश्विक स्टाइल (रंग, स्पेसिंग, टाइपोग्राफी स्थिरांक के साथ theme.js), और रचना के माध्यम से मॉड्यूलर स्टाइल।

अनुशंसित संरचना: theme.js रंग, आकार और टाइपोग्राफी स्थिरांक के साथ; Component.styles.js प्रत्येक कंपोनेंट के बगल में उसके विशिष्ट स्टाइल के लिए; StyleSheet.flatten आधार और विशिष्ट स्टाइल के संयोजन के लिए। बड़े प्रोजेक्ट के लिए, थीम जनरेशन के साथ डिज़ाइन सिस्टम का उपयोग करें।

// theme.js — वैश्विक स्थिरांक
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

मॉड्यूलर संगठन के लाभ: रंग और स्पेसिंग के लिए सत्य का एकल स्रोत, सरलीकृत रिफैक्टरिंग (primary बदलें — सभी बटन अपडेट होते हैं), flatten के माध्यम से स्टाइल पुन: उपयोग, कोड की पठनीयता और पूर्वानुमानशीलता। TypeScript प्रोजेक्ट के लिए, declare module के माध्यम से थीम के लिए प्रकार जोड़ें।