Come passare gli stili attraverso un componente contenitore in React-Native

Question

Sto cercando di creare alcuni componenti dell'interfaccia utente riutilizzabili per la mia app React-Native con stili predefiniti.

Un esempio di default MyText (arancio, 14, grassetto):

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

Come vorrei usarlo:

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

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

C'è un modo per fare questo? Ovviamente se provo ad accedere a this.props.style, restituisco semplicemente un ID per un foglio di stile compilato.

Answer 1

Ho trovato un modo per farlo mentre sfogliavo il codice sorgente di React-Native-Router-Flux.

I fogli di stile possono essere passati come una matrice e sembra che React-Native li applichi in ordine da sinistra a destra (consentendo di sovrascrivere proprietà specifiche).

Ecco ciò che il aggiornato MyText componente dovrebbe essere simile:

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