react-native
स्टाइलिंग

परिचय

वाक्य - विन्यास

• <Component style={styleFromStyleSheet} />
• <Component style={styleObject} />
• <Component style={[style1,style2]} />

टिप्पणियों

इनलाइन शैलियों का उपयोग करते हुए स्टाइलिंग

प्रत्येक प्रतिक्रियाशील मूल घटक एक style प्रोप ले सकता है। आप इसे सीएसएस-शैली शैली गुणों के साथ जावास्क्रिप्ट ऑब्जेक्ट पास कर सकते हैं:

<Text style={{color:'red'}}>Red text</Text>

यह अक्षम हो सकता है क्योंकि इसे हर बार घटक को प्रस्तुत करने के लिए वस्तु को फिर से बनाना होगा। स्टाइलशीट का उपयोग करना पसंद किया जाता है।

एक स्टाइलशीट का उपयोग कर स्टाइल

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

const styles = StyleSheet.create({
    red: {
        color: 'red'
    },
    big: {
        fontSize: 30
    }
});

class Example extends Component {
    render() {
        return (
            <View>
                <Text style={styles.red}>Red</Text>
                <Text style={styles.big}>Big</Text>
            </View>
        );
    }
}

StyleSheet.create() एक ऑब्जेक्ट देता है जहाँ मान नंबर हैं। React Native इन संख्यात्मक आईडी को सही स्टाइल ऑब्जेक्ट में बदलना जानता है।

कई शैलियों को जोड़ना

आप कई शैलियों को लागू करने के लिए style प्रोप में एक सरणी पास कर सकते हैं। जब कोई संघर्ष होता है, तो सूची में अंतिम एक मिसाल कायम करता है।

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

const styles = StyleSheet.create({
    red: {
        color: 'red'
    },
    greenUnderline: {
        color: 'green',
        textDecoration: 'underline'
    },
    big: {
        fontSize: 30
    }
});

class Example extends Component {
    render() {
        return (
            <View>
                <Text style={[styles.red, styles.big]}>Big red</Text>
                <Text style={[styles.red, styles.greenUnderline]}>Green underline</Text>
                <Text style={[styles.greenUnderline, styles.red]}>Red underline</Text>
                <Text style={[styles.greenUnderline, styles.red, styles.big]}>Big red underline</Text>
                <Text style={[styles.big, {color:'yellow'}]}>Big yellow</Text>
            </View>
        );
    }
}

सशर्त स्टाइलिंग

<View style={[(this.props.isTrue) ? styles.bgcolorBlack : styles.bgColorWhite]}>

यदि isTrue का मूल्य true तो इसमें काले रंग की पृष्ठभूमि का रंग अन्यथा सफेद होगा।