React-Nativeのコンテナコンポーネントにスタイルを渡すには

Question

React-Nativeアプリケーション用に再利用可能な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にアクセスしようとすると、コンパイルされたスタイルシートのIDだけが返されます。

Answer 1

私はReact-Native-Router-Fluxのソースコードを参照している間にそれを行う方法を見つけました。

スタイルシートは配列として渡すことができ、React-Nativeは左から右の順に適用されます（特定のプロパティを上書きできるようになります）。

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コンポーネントがどのように見えるかです