我刚刚将我的Javascript react原生项目切换到Typescript项目,但是当我更改它时,在StyleSheet()
中插入函数时出现了很多错误
以前我是这样做的:
const Header = ({ someBoolean }) => (
<View style={styles.conditionalStyle(someBoolean)}>
<Text></Text>
</View>
);
const styles = StyleSheet.create({
conditionalStyle: (someBoolean) => ({
marginTop: someBoolean ? 20 : 5
})
});
但是当我切换到typescript时,它开始抛出这些错误:
Type `
(absolute: any) => {
height: number;
width: number;
display: string;
flexDirection: string;
borderBottomLeftRadius: number;
borderBottomRightRadius: number;
position: string;
zIndex: number;
}` is not assignable to type `ViewStyle | TextStyle | ImageStyle` ts(2322)
Header.tsx(81, 3):
The expected type comes from property `containerMain` which is declared here on type `
NamedStyles<any> | NamedStyles<{
container: {
height: number;
width: number;
display: "flex";
flexDirection: "row";
borderBottomLeftRadius: number;
borderBottomRightRadius: number;
};
... 8 more ...;
screen: (absolute: any) => {
...;
};
}> | NamedStyles<...>`
下面是我的代码的一个示例:
const Header: FC<HeaderProps> = ({ someBoolean }) => (
<View style={styles.conditionalStyle(someBoolean)}>
<Text></Text>
</View>
);
const styles = StyleSheet.create({
conditionalStyle: (someBoolean) => ({ // ERROR
marginTop: someBoolean ? 20 : 5
})
});
是否有其他方法来传递条件样式/属性?
1条答案
按热度按时间juzqafwq1#
要执行您所陈述的操作,您必须将参数传递给您的StyleSheet,并在组件的顶部定义它
因此在您的组件中执行以下操作...
将参数添加到样式表定义中。
导入样式函数(如果来自外部文件)。
在组件中定义样式。
这种将参数发送到StyleSheet的方式将允许您通过useState或Redux以编程方式更新不同的样式值