0

我创建了一个自定义组件。onPress 和 title 有 prop 方法,但我还想添加另一个用于设置颜色的 prop。我尝试制作的结构如下所示

<TextButton color="red" onPress=... title=... />

我的自定义 TextButton 组件文件在这里。

const TextButton = ({ onPress, title, color }) => {

    return (<TouchableOpacity onPress={onPress}><Text style={[styles.helpButton]}>{title}</Text></TouchableOpacity>
    );
}
const styles = StyleSheet.create({
    logButton: {
        fontSize: 18,
        fontWeight: 'bold',
        padding: 25,
        color: {color}
    },
});

我找不到如何添加道具来改变一种特定的风格。如何添加颜色作为道具?

4

1 回答 1

1

您可以通过基于默认样式对象创建一个新对象来实现这一点。

const TextButton = ({ onPress, title, color }) => {
    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={{...styles.helpButton, color: color || "black"}}>{title}</Text>
        </TouchableOpacity>
    );
};

最好添加一个默认大小写,例如,如果您忘记传递颜色,它只会使用“黑色”作为您的文本颜色。如果你觉得这条线太大,你可以把它提取到一个函数中,它看起来像这样:

const TextButton = ({ onPress, title, color }) => {
    const addColor = (style, color) =>{
        return {
            ...style,
            color: color || "black"
        }
    }

    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={addColor(styles.helpButton, color)}>{title}</Text>
        </TouchableOpacity>
    );
};

于 2021-06-11T14:24:26.097 回答