PricingLoginStart free
React Native Academy · पाठ

StyleSheet.create और इनलाइन शैलियाँ

प्रदर्शन के लिए StyleSheet.create से शैली ऑब्जेक्ट बनाएँ, उनकी तुलना इनलाइन शैलियों से करें और ऐरे का उपयोग करके कई शैलियाँ लागू करें।

पाठ 1, कुल 4 में से13 चरण

StyleSheet.create और इनलाइन शैलियाँ, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

React Native की स्टाइल कैसे काम करती हैं

React Native की स्टाइलिंग CSS से प्रेरित है, लेकिन इसमें CSS फ़ाइलों के बजाय JavaScript objects का उपयोग होता है। प्रॉपर्टी नाम camelCase में होते हैं (backgroundColor, background-color नहीं), और लंबाइयों व आकारों के मान डिवाइस-स्वतंत्र पिक्सेल दर्शाने वाली संख्याएँ होते हैं — '16px' जैसी स्ट्रिंग नहीं। इसमें selectors, cascading या inheritance नहीं होते (नेस्टेड Text कॉम्पोनेंट के भीतर फ़ॉन्ट स्टाइल को छोड़कर)। हर कॉम्पोनेंट को style प्रॉप के माध्यम से अलग-अलग स्टाइल किया जाता है, जिससे आपको हर तत्व के रूप-रंग पर स्पष्ट नियंत्रण मिलता है।

import { View, Text } from 'react-native';

export default function StyledBox() {
  return (
    // Inline style object directly
    <View style={{
      width: 120,
      height: 120,
      backgroundColor: '#4f86f7',
      borderRadius: 16,
      padding: 16,
    }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
        Hello!
      </Text>
    </View>
  );
}

प्रदर्शन के लिए StyleSheet.create()

StyleSheet.create() नामित स्टाइल परिभाषाओं का एक ऑब्जेक्ट लेता है और उसका प्रोसेस किया हुआ संस्करण लौटाता है। आंतरिक रूप से React Native इन स्टाइल को नेटिव परत के साथ रजिस्टर करता है और बाद के रेंडर में पूरी स्टाइल ऑब्जेक्ट के बजाय केवल एक पूर्णांक ID भेजता है। इससे JavaScript और नेटिव के बीच संचार का अतिरिक्त बोझ घटता है — विशेष रूप से उन सूचियों में, जो बार-बार दोबारा रेंडर होती हैं। यह डेवलपमेंट मोड में स्टाइल का सत्यापन भी करता है और असमर्थित प्रॉपर्टी इस्तेमाल करने पर चेतावनी देता है। जो स्टाइल बदलती नहीं हैं, उनके लिए हमेशा inline objects के बजाय StyleSheet.create को प्राथमिकता दें।

import { View, Text, StyleSheet } from 'react-native';

export default function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Card Title</Text>
      <Text style={styles.body}>Card description text goes here.</Text>
    </View>
  );
}

// Defined once, referenced by name
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 3,
  },
  title: { fontSize: 18, fontWeight: 'bold', color: '#222' },
  body: { fontSize: 14, color: '#666', marginTop: 6, lineHeight: 20 },
});

Inline Styles का उपयोग कब करें

Inline styles JSX में सीधे JavaScript object literal के रूप में लिखी जाती हैं: style={{ color: 'red' }}। हर रेंडर पर वे फिर से बनाई जाती हैं, इसलिए StyleSheet.create स्टाइल की तुलना में थोड़ी कम कुशल होती हैं। हालाँकि, जब स्टाइल का मान dynamic हो — यानी रनटाइम पर प्रॉप्स या स्थिति से निकाला गया हो — तब inline styles उपयुक्त होती हैं। उदाहरण के लिए, उपयोगकर्ता द्वारा चुने गए थीम रंग के आधार पर backgroundColor सेट करना या वर्तमान कॉम्पोनेंट स्थिति से width निकालना। इन स्थितियों में StyleSheet.create मदद नहीं कर सकता, क्योंकि मान रनटाइम पर बदलता है।

import { View } from 'react-native';

// Inline style: backgroundColor is dynamic (from props)
function ColoredBox({ color, size }) {
  return (
    <View
      style={{
        backgroundColor: color,  // dynamic — must be inline
        width: size,             // dynamic — must be inline
        height: size,
        borderRadius: size / 2,
      }}
    />
  );
}

// Usage:
<ColoredBox color='#ff6b6b' size={80} />
<ColoredBox color='#4f86f7' size={40} />

स्थिर और डायनेमिक स्टाइल को मिलाना

React Native का style प्रॉप style objects की सारणी स्वीकार करता है। सारणी में बाद वाली स्टाइल उसी प्रॉपर्टी के लिए पहले वाली स्टाइल को ओवरराइड करती हैं (CSS की specificity जैसा, लेकिन सरल)। इससे आप StyleSheet.create की मूल स्टाइल को डायनेमिक inline बदलावों के साथ मिला सकते हैं: style={[styles.box, { backgroundColor: color }]}। स्थिर स्टाइल कुशल होती हैं (केवल ID के रूप में भेजी जाती हैं), जबकि डायनेमिक inline ऑब्जेक्ट ऊपर से जोड़ दी जाती है। सारणी में मौजूद falsy मान (null, undefined, false) सुरक्षित रूप से अनदेखे कर दिए जाते हैं।

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function Button({ label, primary, style }) {
  return (
    <TouchableOpacity
      style={[
        styles.base,           // always applied
        primary && styles.primary,  // conditional style
        style,                 // caller's overrides
      ]}
    >
      <Text style={[styles.text, primary && styles.primaryText]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  base: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, borderWidth: 1.5, borderColor: '#4f86f7', alignItems: 'center' },
  primary: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  text: { color: '#4f86f7', fontWeight: '600', fontSize: 16 },
  primaryText: { color: '#fff' },
});

आम StyleSheet प्रॉपर्टी

React Native CSS प्रॉपर्टीज़ के एक अच्छी तरह परिभाषित उपसमुच्चय का समर्थन करता है। सबसे अधिक इस्तेमाल की जाने वाली प्रॉपर्टीज़ हैं: लेआउट (flex, flexDirection, justifyContent, alignItems, padding, margin, width, height), दृश्य (backgroundColor, borderRadius, opacity), और टेक्स्ट (fontSize, fontWeight, color, lineHeight)। grid, float, display: grid, z-index (इसके बजाय zIndex का उपयोग करें), और CSS एनिमेशन जैसी प्रॉपर्टीज़ React Native में समर्थित NOT हैं — इसके बजाय Flexbox और Animated API का उपयोग करें।

const styles = StyleSheet.create({
  // Layout
  container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' },
  // Box model
  box: { width: 100, height: 100, margin: 8, padding: 12 },
  // Visual
  card: { backgroundColor: '#fff', borderRadius: 12, opacity: 0.9, zIndex: 10 },
  // Borders
  bordered: { borderWidth: 1, borderColor: '#ccc', borderStyle: 'solid' },
  // Text styles (only valid on Text component)
  heading: { fontSize: 24, fontWeight: '700', color: '#333', letterSpacing: 0.5 },
});

Styles में प्रतिशत मान

React Native width, height, और top, left जैसी पोज़िशनिंग प्रॉपर्टीज़ के लिए प्रतिशत स्ट्रिंग्स का समर्थन करता है। '100%' की चौड़ाई पैरंट को पूरी तरह भर देती है, '50%' आधी जगह लेती है, और इसी तरह आगे। प्रतिशतों की गणना स्क्रीन के सापेक्ष नहीं, बल्कि पैरंट कंटेनर के आकार के सापेक्ष की जाती है। यह पूरी चौड़ाई वाले कार्ड (width: '100%') और दो-कॉलम लेआउट (width: '48%') के लिए उपयोगी है। स्क्रीन की वास्तविक चौड़ाई के लिए responsive और dynamic मान पाने हेतु Dimensions API या useWindowDimensions हुक का उपयोग करें।

import { View, useWindowDimensions, StyleSheet } from 'react-native';

export default function HalfBox() {
  const { width } = useWindowDimensions();
  const cardWidth = (width - 48) / 2; // two columns with gutters

  return (
    <View style={styles.row}>
      <View style={[styles.card, { width: cardWidth }]} />
      <View style={[styles.card, { width: cardWidth }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', gap: 16, paddingHorizontal: 16 },
  card: { height: 100, backgroundColor: '#4f86f7', borderRadius: 12 },
});

StyleSheet.flatten और Style मर्ज करना

StyleSheet.flatten() एक style array स्वीकार करता है और एक ही merged object लौटाता है। यह तब उपयोगी होता है, जब आपको प्रोग्राम के माध्यम से अंतिम computed style value पढ़नी हो — उदाहरण के लिए, किसी animation में पास करने के लिए style array से backgroundColor पढ़ना। यह array styles को उसी तरह resolve करता है जैसे React Native करता है: बाद की values पहले वाली values को override करती हैं। Debugging के दौरान StyleSheet.flatten(styles) का logging करने से यह देखना भी आसान होता है कि पूरा merging होने के बाद किसी component को ठीक-ठीक कौन-सी styles मिलेंगी।

import { StyleSheet } from 'react-native';

const base = StyleSheet.create({
  box: { width: 100, height: 100, backgroundColor: 'blue' },
});

const override = { backgroundColor: 'red', borderRadius: 12 };

// Merge and inspect the final style
const final = StyleSheet.flatten([base.box, override]);
console.log(final);
// {
//   width: 100,
//   height: 100,
//   backgroundColor: 'red',   ← override wins
//   borderRadius: 12           ← new property added
// }

StyleSheet.hairlineWidth

StyleSheet.hairlineWidth वर्तमान device पर संभव सबसे पतली line width लौटाता है — आम तौर पर retina displays पर 0.5 और कम pixel density वाली screens पर 1। इसका उपयोग पतले dividers और borders के लिए करें, जो किसी भी pixel density पर स्पष्ट दिखाई दें। borderWidth: 0.5 को hardcode करने की तुलना में यह बेहतर है, क्योंकि hairlineWidth screen के pixel ratio के अनुसार अपने-आप अनुकूलित हो जाता है। आधुनिक iPhone और Pixel devices जैसी high-density screens पर यह छोटा, लेकिन स्पष्ट रूप से दिखाई देने वाला polish detail है।

import { View, StyleSheet } from 'react-native';

// A 1-physical-pixel divider line
export default function Divider() {
  return <View style={styles.divider} />;
}

const styles = StyleSheet.create({
  divider: {
    height: StyleSheet.hairlineWidth,  // thinnest possible
    backgroundColor: '#e0e0e0',
    marginVertical: 8,
  },
});

// StyleSheet.hairlineWidth value:
// Retina (2× pixel ratio) → 0.5
// 3× pixel ratio → 0.333...
// 1× screen → 1

Components के साथ Styles रखना

एक सामान्य convention यह है कि styles को उसी file के निचले भाग में define किया जाए, जिसमें उनका उपयोग करने वाला component हो। इससे संबंधित code एक साथ रहता है और किसी दूसरे file को खोले बिना component की पूरी visual specification समझना आसान होता है। बहुत बड़े components में, जिनमें styles के कई sections हों, आप styles को अलग ComponentName.styles.ts file में बाँट सकते हैं। पूरे app के लिए एक ही global styles.js file बनाने से बचें — वह संभालना कठिन हो जाता है और यह पता लगाना मुश्किल हो जाता है कि कौन-सी styles कहाँ इस्तेमाल हो रही हैं।

// ProfileCard.tsx
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileCard({ name, bio }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

// Styles defined at the bottom of the same file
const styles = StyleSheet.create({
  card: { backgroundColor: '#fff', borderRadius: 16, padding: 20 },
  name: { fontSize: 20, fontWeight: 'bold', color: '#111' },
  bio: { fontSize: 14, color: '#555', marginTop: 6, lineHeight: 20 },
});

Dark Mode के अनुकूल Styles

Dark mode का समर्थन करने के लिए वर्तमान scheme ('light' या 'dark') का पता लगाने हेतु useColorScheme हुक का उपयोग करें, फिर प्रत्येक mode के लिए अलग-अलग color values चुनें। इसे अपने style array के साथ मिलाएँ: base styles में layout और shape रखें, जबकि एक dynamic color object theme-specific colors लागू करे। अधिक scalable तरीका ThemeContext है, जो पूरे app में color tokens उपलब्ध कराता है, लेकिन बिना किसी अतिरिक्त library के dark mode चालू करने के लिए useColorScheme सबसे तेज़ तरीका है।

import { View, Text, StyleSheet, useColorScheme } from 'react-native';

export default function ThemedCard({ title }) {
  const scheme = useColorScheme(); // 'light' | 'dark'
  const colors = scheme === 'dark'
    ? { bg: '#1c1c1e', text: '#f0f0f0', border: '#3a3a3c' }
    : { bg: '#ffffff', text: '#111111', border: '#e0e0e0' };

  return (
    <View style={[styles.card, { backgroundColor: colors.bg, borderColor: colors.border }]}>
      <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { borderWidth: 1, borderRadius: 12, padding: 16, marginBottom: 12 },
  title: { fontSize: 18, fontWeight: '600' },
});

React Native में Styled Components

यदि आप CSS-in-JS syntax पसंद करते हैं, तो styled-components React Native के साथ काम करता है। इसे npm install styled-components से install करें और styled.View, styled.Text factories का उपयोग करें। Styled-components पर्दे के पीछे optimized StyleSheet entries generate करते हैं, और आपको template literals के साथ CSS जैसी syntax लिखने देते हैं (static styles के लिए backticks और interpolation के बजाय single quotes का उपयोग करें)। यह props-आधारित dynamic styling और पूर्ण TypeScript support भी देता है। परिचित CSS authoring अनुभव के कारण कई teams इसे पसंद करती हैं।

import styled from 'styled-components/native';

// Define styled components
const Card = styled.View`
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  elevation: 3;
`;

const Title = styled.Text`
  font-size: 18px;
  font-weight: bold;
  color: #222;
`;

export default function StyledCard({ title }) {
  return (
    <Card>
      <Title>{title}</Title>
    </Card>
  );
}

त्वरित जाँच

इस lesson में React Native Mobile Development की concepts के बारे में अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

Lesson का पुनरावलोकन

इस lesson में आपने सीखा: StyleSheet.create inline objects की तुलना में अधिक efficient है, क्योंकि styles को पूर्ण objects के बजाय IDs के रूप में भेजा जाता है; style arrays कई style objects को merge करते हैं और बाद की entries को प्राथमिकता देते हैं; और useColorScheme dark mode-aware styling सक्षम करता है। अब हम पूर्ण layout control के लिए Flexbox direction, justifyContent और alignItems को समझेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
30
पाठ
120
निःशुल्क सीखना शुरू करेंपूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “StyleSheet.create और इनलाइन शैलियाँ” पाठ निःशुल्क है?

हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “StyleSheet.create और इनलाइन शैलियाँ” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“StyleSheet.create और इनलाइन शैलियाँ” में मैं क्या सीखूँगा?

प्रदर्शन के लिए StyleSheet.create से शैली ऑब्जेक्ट बनाएँ, उनकी तुलना इनलाइन शैलियों से करें और ऐरे का उपयोग करके कई शैलियाँ लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“StyleSheet.create और इनलाइन शैलियाँ” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. StyleSheet.create और इनलाइन शैलियाँ
  2. Flexbox दिशा, JustifyContent, AlignItems
  3. flex, flexGrow और अनुकूल आकार
  4. अनुकूल कार्ड ग्रिड बनाना
← React Native Academy पर वापस जाएँ