在 React Native 上使用 styled-components 设置多个样式 props答案

【问题标题】：Styling multiple style props with styled-components on React Native在 React Native 上使用 styled-components 设置多个样式 props
【发布时间】：2019-07-15 05:43:54
【问题描述】：

我已经在 React web 中使用 Styled-components 有一段时间了，但最近我开始开发一个 React Native 应用程序，我决定在其中使用 styled-compoents。当样式组件只有 @ 987654322@属性，比如默认的react-native组件。

我一直遇到的问题是，当我需要为具有多个样式属性（例如containerStyle、inputStyle 等）的更复杂的组件设置样式时。

当它只是一个具有不同名称的样式属性时，我可以执行以下操作：

const StyledBadge = styled(({ style, ...rest }) => {
  return <Badge {...rest} containerStyle={style} />;
})`
  position: absolute;
  right: 0;
  top: 0;
`;

这完美无缺，但是当组件有多种样式时，我不知道该怎么办：

const StyledList = styled(({ style, ...rest }) => {
  return <List {...rest} containerStyle={style} searchInputStyle={?} searchItemStyle={?} />;
})`
`;

使用像 Gifted-React-Native-Chat 这样的组件更糟糕，因为它具有用于将属性作为对象传递给其内部组件的属性，例如 messageProps、listViewProps、containerProps，它们都具有 @ 987654331@财产。

有没有人知道如何做到这一点，或者是否有可能？

这几天我一直在寻找并试图找到解决方案，但我找不到。

谢谢！

【问题讨论】：

我对 React Native 也很好奇。你找到解决办法了吗？
嘿@Larbear，不，我没有=/
你必须使用 styled-components.com/docs/basics#attaching-additional-props 这里提到的 .attrs 构造函数，但会失去 css 语法规则，并且必须像使用 Stylesheet 一样使用样式。
谢谢@Larbear，这很糟糕，但它让我对如何解决这个问题有了一个非常好的想法。解决后，我会在此处留下更新。
@Eric.M 进展如何？有更新吗？

标签： react-native styled-components

【解决方案1】：

这就是我们最终的做法。

Styled-components 仅适用于 style 属性，但许多自定义组件不公开此属性。相反，它们提供了一个 *Style 属性，该属性被传递给子组件样式属性。

例如，react-native-material-textfield 有 5 个样式道具。

我们使用attrs 函数将样式组织与其他样式组件保存在一个文件中。

这不允许您对伪组件使用传统的 css 语法，但这是我们能想到的最好的方式来保持所有样式井井有条。

【讨论】：