如何将样式传递给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>
    }
}