Question

我扩展了Text组件，以便拥有一个带有自定义字体的可重用文本组件。

我的自定义组件应接受传递给它的样式并向其添加自定义字体。

我目前正在这样做：

MyText.js

import React from 'react'
import {
    Text,
    StyleSheet
} from 'react-native';


export default class MyText extends React.Component {

    render() {

        const style =
            Object.assign( {},
                StyleSheet.flatten(this.props.style),
                {fontFamily: "My Font"}
            );

        return (
            <Text style={style}>
                {this.props.children}
            </Text>
        );
    }

}

虽然这可以按预期工作，但每次都必须弄平样式表似乎是错误的。以上是一个简单的例子，我可以想到我可以使用这种模式的其他组件。出于这个原因，我想确保我不会忽视更合适的方法。

Answer 1

这取决于你想要定制多少。在这种情况下，如果它只是一个不同的字体，它可能类似于

import React from 'react'
import {
    Text,
    StyleSheet
} from 'react-native';
import _ from 'lodash';



export default class MyText extends React.Component {

    render() {
        const filteredProps = _.omit(this.props, 'style'); 
        return (
            <Text style={[{fontFamily: "My Font"}, this.props.style]} {...filteredProps} />
        );
    }

}

将样式应用于扩展的React Native组件的推荐方法是什么？

1 个答案: