如何將樣式傳遞給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按從左到右的順序應用它們（允許您覆蓋特定的屬性）。

這裏是更新MyText成分應該是什麼樣子：

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