React Native - 使用 Prop 更改自定义组件按钮的颜色

Question

我创建了一个自定义组件。 onPress 和 title 有道具方法，但我还想添加另一个道具来设置颜色。我尝试制作的结构如下

<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}
    },
});

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

Answer 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>
    );
};

React Native - 使用 Prop 更改自定义组件按钮的颜色

React Native - Changing Color of Custom Component Button with Prop

stylesheet

react-native

react-props

react-native-stylesheet

react-hooks