किसी घटक की "शैली" प्रोप

Question

से सीएसएस संपत्ति मान प्राप्त करें मैं पुस्तकालय के लिए एक प्रतिक्रिया मूल घटक लिख रहा हूं और मैं चाहता हूं कि उपयोगकर्ता style संपत्ति का उपयोग करके इसे शैली बनाने में सक्षम हों, जैसे React.View और अन्य अंतर्निर्मित घटक।

हालांकि, चूंकि मेरा घटक वास्तव में कुछ घोंसले वाले विचारों से बना है, इसलिए मुझे आंतरिक वाले लोगों को किस स्टाइल को डालने के लिए कुछ गणना करने की आवश्यकता है। उदाहरण के लिए, मुझे इसके चारों ओर की सीमा की मोटाई के आधार पर किसी छवि के आकार को समायोजित करने की आवश्यकता हो सकती है, या दिए गए टेक्स्ट रंग के आधार पर एक हाइलाइट रंग समायोजित करना पड़ सकता है, या किसी अन्य तरीके से स्टाइल के किसी अन्य टुकड़े से स्टाइल का कुछ टुकड़ा अनुमान लगा सकता है ।

ऐसा करने के लिए, मैं जो कुछ भी style आधार के रूप में पारित हो से बाहर वास्तविक सीएसएस गुण (borderWidth: 2 या backgroundColor: 'pink' की तरह) निकालने में सक्षम होने की जरूरत है। यह तब तक ठीक है जब तक यह एक सादा वस्तु के रूप में आता है, लेकिन यह React.StyleSheet.create पर कॉल का नतीजा भी हो सकता है। यह सभी चयनकर्ताओं के साथ एक अपारदर्शी वस्तु प्रतीत होता है जो संख्यात्मक आईडी पर मैप किए जाते हैं।

मैं इन्हें कैसे हल कर सकता हूं और वास्तविक सीएसएस गुण प्राप्त कर सकता हूं ताकि उन्हें सीधे View पर सीधे पास करने के बजाय कुछ और जटिल हो सके?

StyleSheetRegistry = require("../../node_modules/react-native/Libraries/StyleSheet/StyleSheetRegistry"), 

तब में शैली आईडी पारित:

var style = StyleSheetRegistry.getStyleByID(this.props.style) 

Answer 1

निर्मित StyleSheet.flatten समारोह (या समान flattenStyle समारोह) कुछ भी वैध तरीके से मूल्यों के लिए एक वस्तु मानचित्रण सीएसएस संपत्ति के नाम में style प्रोप के लिए पारित किया जा सकता है कि बदल सकते हैं। यह सादे वस्तुओं पर काम करता है, आईडी StyleSheet.create(), और सरणी द्वारा लौटाई गई आईडी।

उदाहरण उपयोग एक घटक परिभाषा के भीतर से चौड़ाई style प्रोप में निर्दिष्ट की जाँच करने के:

import { StyleSheet } from 'react-native' 

// ... then, later, e.g. in a component's .render() method: 

let width = StyleSheet.flatten(this.props.style); 

Answer 2

आप आयात करने के लिए StylesheetRegistry की जरूरत अंडरस्कोर प्रोप:

const styles = EStyleSheet.create({ 
    text: { 
    fontSize: '1rem', 
    color: 'gray' 
    } 
}); 

क्रम में:

styles = { 
    text: 0, 
    _text: { 
    fontSize: 16, 
    color: 'gray' 
    } 
} 

Answer 3

कृपया पर विस्तारित स्टाइलशीट के माध्यम से बनाया https://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

शैली एक नजर है में मूल मान हैं