Question

我试图让我的组件使用样式组件在react-native中使用动态样式。这样做的方法显示在https://github.com/styled-components/styled-components/issues/940

target

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

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

但是，我只是传递一个包含我想要使用的所有动态样式的customStyle prop。像这样。。。 https://snack.expo.io/BkpToRe0f

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

不幸的是，这不适用于样式。有人知道为什么吗？如果有替代解决方案吗？

Answer 1

对于想对何时在样式化组件中使用additional props进行详细说明的人，我将举一个简短的示例来说明attrs的工作方式。也称为附加道具。您可以在styled components documentation上了解它。

以下是使用CSS的背景图片的简单示例。我需要为可访问性应用标题和aria标签。一种方法是附加其他道具。

// 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的更多信息。它们都包含非常有用的信息和示例。

Answer 2

我认为你对如何使用样式组件感到有点困惑

这是你给出的例子：

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" />

Answer 3

试试这个怎么样

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

React-Native Styled-Components采用动态样式

3 个答案: