React Native中Styled Component如何使用多props实现动态样式控制

你现有代码的问题是在样式模板字符串内嵌套了第二层props回调函数，该回调无法被styled-components正确解析执行，所以样式不会生效。可通过以下两种方案实现需求：

方案1：直接解构所有props处理 #

直接在最外层的插值函数中同时解构active和color两个props，不用嵌套第二层回调：

const SelectedPill = styled.TouchableOpacity`
  ${({ active, color }) => active && `
    background: ${color ? color : '#292929'};
  `}
`

你也可以用空值合并运算符??替代三元判断，避免color传入空字符串、0等合法 falsy 值时被误替换为默认色：

const SelectedPill = styled.TouchableOpacity`
  ${({ active, color }) => active && `
    background: ${color ?? '#292929'};
  `}
`

方案2：配合defaultProps简化逻辑 #

如果希望默认值的声明更清晰可维护，可以单独给组件设置默认props：

const SelectedPill = styled.TouchableOpacity`
  ${({ active, color }) => active && `
    background: ${color};
  `}
`

SelectedPill.defaultProps = {
  color: '#292929'
}

两种方案都可以实现需求：active为true时优先取传入的color作为背景色，无color时用默认值#292929，active为false时不生效该背景样式。

内容的提问来源于stack exchange，提问作者Nathan Belete