प्रतिक्रिया-मूल

Question

में एक कंटेनर घटक के माध्यम से आप शैलियों को कैसे पारित कर सकते हैं मैं अपने रिएक्ट-नेटिव ऐप के लिए कुछ पुन: प्रयोज्य UI घटक बनाने की कोशिश कर रहा हूं जिनमें डिफ़ॉल्ट शैलियों हैं।

एक उदाहरण डिफ़ॉल्ट MyText (नारंगी, 14, बोल्ड):

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

const styles = StyleSheet.create({text: {color: 'orange', fontSize: 14, fontWeight: 'bold'}}); 

export default class MyText extends Component { 
    render() { 
     return <Text style={styles.text}>{this.props.children}</Text> 
    } 
} 

मैं इसे कैसे उपयोग करना चाहते हैं:

import Text from '../ui/myText'; 

... 
<Text style={{color: 'black'}}>My custom styled text, but in black instead of orange</Text> 
... 

वहाँ यह करने के लिए कोई तरीका है? जाहिर है अगर मैं this.props.style तक पहुंचने का प्रयास करता हूं तो यह एक संकलित स्टाइलशीट के लिए एक आईडी देता है।

Answer 1

मुझे प्रतिक्रिया-मूल-राउटर-फ्लक्स के स्रोत कोड के माध्यम से ब्राउज़ करते समय ऐसा करने का एक तरीका मिला।

स्टाइलशीट को सरणी के रूप में पारित किया जा सकता है, और ऐसा लगता है कि प्रतिक्रिया-मूल उन्हें बाएं से दाएं क्रम में लागू करता है (आपको विशिष्ट गुणों को ओवरराइट करने की अनुमति देता है)।

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

const styles = StyleSheet.create({text: {color: 'orange', fontSize: 14, fontWeight: 'bold'}}); 

export default class MyText extends Component { 
    render() { 
     return <Text style={[styles.text, this.props.style]}>{this.props.children}</Text> 
    } 
} 

:

यहाँ अद्यतन MyText घटक की तरह दिखना चाहिए है