使用具有自定义样式道具的第三方组件创建样式组件？答案

【问题标题】：create styled component with third party component that has custom style props?使用具有自定义样式道具的第三方组件创建样式组件？
【发布时间】：2020-04-28 16:43:56
【问题描述】：

我使用 react-native-community 中的 Slider，该组件具有用于设置样式的独特道具，thumbTintColor，minimumTrackTintColor，maximumTrackTintColor，我需要将样式传递给我的主题提供者。看来我不能将道具传递给这个组件，有人知道实现这一点的方法吗？这就是我现在所拥有的，不幸的是它不起作用。

const StyledSlider = styled(Slider)``

export const SurveySlider = props => {
    return (
        <StyledSlider
            style={{
              width: '80%',
              height: 40,
              alignSelf: 'center'
            }}
           minimumValue={0}
           maximumValue={20}
           thumbTintColor={`${props => props.theme.primaryColor}`}
           minimumTrackTintColor={`${props => 
           props.theme.primaryColor}`}
           maximumTrackTintColor={`${props => 
           props.theme.primaryColor}`}
          onValueChange={value => props.onValueChange(value)}
          />
          )
        }

【问题讨论】：

我无法使用我的主题提供者 ${props=> props.theme.primaryColor}...:(

标签： react-native styled-components

【解决方案1】：

试试这个： minimumTrackTintColor={props.theme.primaryColor}

【讨论】：

不幸的是我回来了“未定义不是对象”（'评估'props.theme.primaryColor'）
您是否从父组件传递了“主题”道具？ 'theme' 是具有 primaryColor 键的对象吗？
是的，我将主题向下传递，它被应用于其他组件。我将我的主题对象传递给包装我的整个应用程序的 ThemeProvider
尝试使用 console.log(props.theme) 或 console.log(props) 来检查你是否将主题对象传递给了这个组件。

【解决方案2】：

我可以通过使用样式化组件提供的 attrs 方法来解决这个问题

const StyledSlider = styled(Slider).attrs(props=>{ thumbTintColor: props.theme.primaryColor })``

【讨论】：