如何在React native中使用Typescript传递样式表中的参数

Question

我刚刚把我的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
})
});

是否有另一种方式来传递条件样式/道具?

Answer 1

要做到你所说的，你必须传递参数到你的样式表，并在你的组件的顶部定义它

所以在你的组件中做这样的…

为你的样式表定义添加参数

export const styling = (someBoolean:boolean) =>
StyleSheet.create({
conditionalStyle:{
marginTop: someBoolean ? 20 : 5
}
});

导入Style函数(如果来自外部文件)

import styling from ...

在组件中定义样式。

const Header:FC<HeaderProps> = ({ someBoolean }) => (
const styles = styling(someBoolean);
<View style={styles.conditionalStyle}>
<Text></Text>
</View>
);

这种向样式表发送参数的方式将允许您通过useState或Redux以编程方式更新不同的样式值

Answer 2

另一种解决方案(在我看来更容易)是在组件内部创建样式表，这样您就可以像往常一样使用所有的道具:

const Header = ({ someBoolean }) => {
const styles = StyleSheet.create({
conditionalStyle: { 
marginTop: someBoolean ? 20 : 5
}
})
return (
<View style={styles.conditionalStyle}>
<Text></Text>
</View>
);