在具有样式化组件的 react 本机中应用样式

Question

我有一个组件，Logo，我正在尝试在其中应用宽度和高度：

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 实现，因为它只是没有传递给我的组件。当我检查 Logo 的传递道具(通过控制台记录它们(时，有一个样式对象，但这似乎不是我可以使用的任何东西，并且在样式组件文档中没有太多提及它：

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。