Question

我有一个徽标组件，试图在其中应用宽度和高度：

import styledNative from "styled-components/native";
import {Image, View} from "react-native"
import companyIcon from "../svg/companyIcon.svg";

const Logo = () => (
  <Image source={{uri: companyIcon}} />;
);

const StyledLogo = styledNative(Logo)`
  width: 48px;
  height: 48px;
`;

const Header = () => {
  return (
    <View>
      <StyledLogo />
    </View>
  );
};

这给我们留下了一个不可见的徽标，宽度为0。样式组件文档似乎建议使用传入的className属性（https://www.styled-components.com/docs/advanced#existing-css），但这似乎适用于标准样式组件，而不是标准样式组件react-native / react-native-web实现，因为它没有传递给我的组件。当我检查传递的徽标道具（通过控制台将其记录下来）时，有一个样式对象，但这似乎没什么用，在样式中没有太多提及组件文档：

style: Array(2)
  0: 91
  1: undefined
  length: 2

所以我不太确定该怎么做。如何使用样式化组件来样式化组件？

Answer 1

您没有将样式应用于图片。

现在发生的是，您的Logo组件正在接收这些样式道具，但没有通过它们。

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} />;
);

因此，您要做的就是将Logo道具散布在图片上，以便获取所需的数据。

const Logo = (props) => ( // <-- containing style props
  <Image {...props} source={{uri: companyIcon}} />;  // <-- styles now applied to Image
);

或者，您也可以仅通过样式道具。

const Logo = (props) => ( // <-- containing style props
  <Image source={{uri: companyIcon}} style={props.style}/>;
);

编辑： 似乎您正在传递无效的样式。 React Native希望您传入的值没有单位。因此，您的样式应改为width: 48;，删除...px。

在使用样式组件的本机中应用样式

1 个答案: