如何将样式传递给 ReactNative 中的容器组件

发布于04月14日

我正在try 为我的React原生应用程序创建一些具有默认样式的可重用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>
...

有办法做到这一点吗？显然，如果我try 访问this.props.style，它只会返回一个已编译样式表的ID.

推荐答案

我在浏览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>
    }
}