在 React Native 上使用样式组件设置多个样式道具的样式

Question

我在React web上使用样式化组件已经有一段时间了，但最近我开始开发一个React Native应用程序，我决定在中使用样式化的组件。当设计只有style属性的组件时，比如默认的反应本地components，这是非常好的。

但是，我遇到的问题是，当我需要为具有多个样式属性的更复杂的组件设置样式时，例如容器样式、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，所有这些组件都具有 property。

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

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

谢谢

Answer 1

这就是我们最终的结果。

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

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

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