Stilleri React-Native

Question

'daki bir kapsayıcı bileşenine nasıl geçirebilirsiniz React-Native uygulamasında varsayılan stilleri olan yeniden kullanılabilir UI bileşenleri oluşturmaya çalışıyorum.

örneği varsayılan MyText (turuncu, 14, kalın):

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> 
    } 
} 

bunu kullanmak istiyorum nasıl bunu yapmanın bir yolu

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

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

var mı? Açıkçası, this.props.style erişmeye çalışırsam, derlenmiş bir stil sayfası için bir kimlik verir.

Answer 1

React-Native-Router-Flux kaynak koduna göz atarken bunu yapmanın bir yolunu buldum.

Stil sayfaları bir dizi olarak geçirilebilir ve React-Native gibi görünen öğeler bunları soldan sağa doğru uygular (belirli özelliklerin üzerine yazmanıza izin verir).

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> 
    } 
} 

: Burada

updated MyText bileşeni gibi görünmelidir ne