我使用的是带有typescript的react native,我想从状态更新我的样式属性。但这给了我错误。
const [VerifiedCheck, setIsVerifiedCheck] = useState("flex");
<View style={{display: VerifiedCheck}}>
<Icon name={'check-circle'} size={24} color={'green'} />
</View>
我在style
:上出错
No overload matches this call.
Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
Type '{ display: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
Types of property 'display' are incompatible.
Type 'string' is not assignable to type '"none" | "flex" | undefined'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ display: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
Types of property 'display' are incompatible.
Type 'string' is not assignable to type '"none" | "flex" | undefined'.ts(2769)
index.d.ts(2522, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'
index.d.ts(2522, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'
正如错误所说,
Type 'string' is not assignable to type
'"none" | "flex" | undefined'.ts(2769)
问题是当你说
const [VerifiedCheck, setIsVerifiedCheck] = useState("flex");
verifiedCheck
的推断类型是string
,这是最常见的情况。例如,请参见:
const [title, setTitle] = useState("default title");
对于typescript来说,把title
看作字符串是很有意义的。所以,我认为,如果你明确地告诉typescript可能的类型,它就会停止困扰你。像这样:
const [VerifiedCheck, setIsVerifiedCheck] = useState<"none" | "flex" | undefined>("flex");
<View style={{display: VerifiedCheck}}>
<Icon name={'check-circle'} size={24} color={'green'} />
</View>