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

Question

我已经在 React web 中使用 Styled-components 有一段时间了，但最近我开始开发一个 React Native 应用程序，我决定在其中使用 styled-compoents。当样式化只有style属性的组件时很棒，例如默认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并且所有组件都具有该style属性。

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

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

谢谢！

标签： react-nativestyled-components

Answer 1

这就是我们最终如何做到的。

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

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

我们使用该attrs功能将样式组织与其余样式组件保存在一个文件中。

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