React-Native Styled-Components attrs 动态样式答案

【问题标题】：React-Native Styled-Components attrs dynamic stylesReact-Native Styled-Components attrs 动态样式
【发布时间】：2018-10-20 01:36:09
【问题描述】：

我试图让我的组件使用样式组件在 react-native 中使用动态样式。此处显示了执行此操作的方法https://github.com/styled-components/styled-components/issues/940

const ColorAnimation = styled.div.attrs({
  style: props => ({
    color: props.color
  })
})`
  // static styles

它也适用于 React Native，如此处所示。 https://snack.expo.io/ryIXsAe0M

import React, { Component } from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native'; // 2.2.4

const StyledView = styled.View.attrs({
  style: props => ({
    backgroundColor: props.backgroundColor,
    height: props.height,
  }),
})`
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

const RotatedBox = styled.View`
  transform: rotate(90deg);
  text-shadow-offset: 10px 5px;
  font-variant: small-caps;
  margin: 5px 7px 2px;
`;

export default class App extends Component {
  render() {
    return (
      <View style={{ marginTop: 50 }}>
        <StyledView height={100} backgroundColor="yellow">
          <StyledText>Hello World!</StyledText>
        </StyledView>
        <RotatedBox />
      </View>
    );
  }
}

但是，我宁愿只传入一个 customStyle 道具，其中包含我想要使用的所有动态样式。像这样。 . . https://snack.expo.io/BkpToRe0f

const StyledView = styled.View.attrs({
  style: props => props.customStyles,
})`
  background-color: papayawhip;
`;

<StyledView customStyles={{ height: 100, backgroundColor: 'yelllow' }}>

很遗憾，这不适用于样式。有人知道为什么吗？另外是否有替代解决方案？

【问题讨论】：

标签： react-native styled-components

【解决方案1】：

我觉得你对如何使用样式化组件有点困惑

这是你给出的例子：

const StyledView = styled.View.attrs({
  style: props => ({
    backgroundColor: props.backgroundColor,
    height: props.height,
  }),
})`
  background-color: papayawhip;
`;

应该是这样的：

const StyledView = styled.View`
  height: ${props => props.height},
  background-color: ${props => props.backgroundColor ? "papayawhip"};
`;

虽然第一个按您说的那样工作，但第二个更干净，您可以使用该组件而无需传递额外的 customStyles 道具。样式化的组件会为您处理好这些事情

<StyledView backgroundColor={"blue"} height="500" />

【讨论】：

【解决方案2】：

对于任何想要更详细地解释何时在样式组件中使用additional props 的人，我将快速举例说明attrs 的工作原理。也称为附加附加道具。您可以在 styled components documentation 上阅读。

下面是一个使用 CSS 的背景图像的简单示例。出于可访问性目的，我需要应用标题和 aria-label。一种方法是附加额外的道具。

// Component
getBackgroundImage = () => {
  const { imageUrl, altTag } = this.props;

  return (
    <BackgroundImage
      imageUrl={imageUrl}
      altTag={altTag}
    />
  );
};

// Styled component
export default styled.div.attrs({
  title: props => props.altTag,
  'aria-label': props => props.altTag,
  role: 'img,
})`
  background: url(${props => props.imageUrl}) center center/ cover no-repeat;
  height: 400px;
  width: 100%;
`;

然后我将能够在 DOM 中找到该组件，并且我将能够看到这些属性。我相信这是正确的用法，并将您对附加道具和静态样式的担忧分开。

关于问题：

很遗憾，这不适用于样式。有谁知道这是为什么？

我认为它不起作用，因为 backgroundColor 不是属性。高度是适用于certain HTML elements 的属性，可通过此链接找到。

其他HTML属性可以找到here

因此，要让您的 StyledComponent 显示正确的样式，不需要 attrs。

const StyledView = styled.View`
  background-color: ${props => props.backgroundColor};
  height: ${props => props.height};
`;

<StyledView height={100} backgroundColor="yelllow" />

有关attaching-additional-props 和attrs API 的更多信息。它们都包含非常有用的信息和示例。

【讨论】：

【解决方案3】：

试试这个怎么样

const StyledView = styled(View).attrs(props => ({
    backgroundColor: props.theme.backgroundColor,
    height: props.theme.height,
  })
)

【讨论】：