在React Native上使用样式化组件来样式化多个样式道具

Question

我已经有一段时间在React Web上使用样式化组件了，但是最近我开始开发一个React Native应用程序，我决定在其中使用样式化组件。当对仅具有{ {1}}属性，例如默认的style组件。

我遇到的问题是，当我需要对具有多个样式属性（例如react-native，containerStyle等）的更复杂的组件进行样式设置时。

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

inputStyle

这可以正常工作，但是当组件具有多种样式时，我不知道该怎么做：

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

对于Gifted-React-Native-Chat这样的组件，情况更糟，因为它具有将对象作为对象传递给其内部组件的属性，例如const StyledList = styled(({ style, ...rest }) => { return <List {...rest} containerStyle={style} searchInputStyle={?} searchItemStyle={?} />; })` `; ，messageProps，listViewProps和它们都具有containerProps属性。

有人知道怎么做吗，甚至可能吗？

几天以来，我一直在寻找并尝试找到解决方案，但我没有。

谢谢！

Answer 1

这就是我们最终要这样做的方式。

样式化的组件仅可与style道具一起使用，但是许多自定义组件不会公开该道具。相反，他们提供了一个*Style道具，该道具将传递给子组件样式的道具。

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

我们使用attrs函数将样式的组织与其余样式化的组件保持在一个文件中。

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