सभी पाठ घटकों के लिए मूल लागू शैलियों का प्रतिक्रिया

Question

क्या टेम्पलेट बनाने के लिए देशी प्रतिक्रिया में Text या ScrollView आदि के सभी घटकों के शैलियों को लागू करने का कोई आसान तरीका है?
उदाहरण के लिए, मैं सभी दृश्यों में सभी पाठ घटकों के लिए verdanafontFamily शैली का उपयोग करना चाहता हूं। जब भी मैं टेक्स्ट घटक का उपयोग करता हूं, शैली को निर्दिष्ट करने से हासिल करने का कोई आसान तरीका है?
या क्या इसे कस्टम टेक्स्ट घटक बनाने की आवश्यकता है? और मूल घटक के बजाय इसे नीचे उदाहरण के बजाय इसका उपयोग करें। का प्रयोग करें MyText बजाय Text

const MyText = ({data}) => <Text style={style.commonTextStyle}>{data}</Text> 

Answer 1

आप आम शैलियों निकालने और वैश्विक रूप में उन्हें प्रदान कर सकते हैं। यदि आवश्यक हो तो आप उन्हें प्रत्येक टेक्स्टव्यू के लिए शैलियों को जोड़/संपादित कर सकते हैं।

export default StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}) 

फिर यू उपयोग कर सकते हैं <Text style={[styles.welcome, {color:'red'}]]}>Hello</Text>

यू की तरह react-native-extended-stylesheet

libs ध्यान देना चाहिए तुम भी कैसे स्टाइलशीट सरल और readble रखने के लिए पर इन तकनीकों का पालन कर सकते हैं।
विक्की के जवाब का संदर्भ लें Tips for styling React

Answer 2

इसके अलावा, आप बस नाम पाठ या MyText आदि के साथ एक नया घटक बनाते हैं, और अपनी परियोजना के लिए इसे आयात जब भी आप इसकी आवश्यकता कर सकते हैं।

function MyText(props) { 
    return (
    <Text style={styles.MY_CUSTOM_STYLES}> 
     {props.children} 
    </Text> 
); 
} 

और की तरह उपयोग,

import MyText from '/path/to/MyText'; 

... 

render() { 
    return (<MyText>Now I have my custom styles.</MyText>); 
} 

आप उसका नाम बदल रहा है अगर आप ऐसा पाठ घटकों को परिभाषित करने के लिए इस्तेमाल किया लग रहा है से आयात पाठ के रूप में उपयोग कर सकते हैं। आगे पढ़ने के लिए this documentation देखें। (कि ध्यान दें: MyText घटक ऊपर हल्के परिभाषा के लिए एक functional stateless component है।)

Answer 3

आप इस प्रकार का आर.एन. घटक बनाना चाहिए:

/* @flow */ 

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

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

इस तरह, अपने स्वयं के पाठ घटक से अतिरिक्त शैलियों विरासत कर सकते हैं कहीं भी आप उनका उपयोग करते हैं।

नोट: ध्यान रखें कि आपके स्वयं के कस्टम टेक्स्ट घटक का उपयोग सभी मामलों में नहीं किया जा सकता है, उदा। टच करने योग्य हाइलाइट के अंदर, इन मामलों में आपको प्रतिक्रिया-मूल पुस्तकालय से मूल पाठ का उपयोग करना होगा।

import Text from 'YOUR_PATH/Text.js' 

आशा इस मदद करता है:

अब, तुम बस के लिए अपने आयात बदल सकते हैं।

Answer 4

https://github.com/Ajackster/react-native-global-props टेक्स्ट, व्यू इत्यादि सहित अधिकांश प्रतिक्रिया मूल घटकों के लिए वैश्विक शैलियों की पेशकश प्रतीत होता है। गिटहब के रीडमे में उदाहरण हैं। यह आवश्यकता को संबोधित करने के लिए प्रतीत होता है हालांकि मैंने अभी तक इसका परीक्षण नहीं किया है।

Answer 5

Glamorous भी यह बहुत ही सफाई से मूल निवासी प्रतिक्रिया में संभालती है: मेरे पूछने

const MyText = glamorous.Text({ 
    // ... any styles 
}); 

export MyText;