道具的类型是什么?风格中的风格.TouchableOpacity组件?

Question

在TypeScript中使用react-native和styled-components，

我想知道props.style在styled.TouchableOpacity组件中的类型是什么，以便能够对其进行wrap样式，例如:

const Boutton = styled.TouchableOpacity
const Test = () => <Button />
const WrapTest = styled(Test)({
// add styled
})

为了做到这一点，我必须有合适的类型来满足TypeScript:

const Test = (props) => <Button style={props.style} />

我尝试使用style?: StyleProps<ViewStyle>，但它给了我以下错误:

No overload matches this call.
Overload 1 of 2, '(props: Omit<Omit<TouchableOpacityProps & RefAttributes<TouchableOpacity> & { activeOpacity: 0.7; } & ContainerProps, "activeOpacity"> & Partial<...>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle>' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index...'.
Type 'ViewStyle' is not assignable to type 'StyleProp<ViewStyle>'.
Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").ViewStyle'.
Types of property 'backgroundColor' are incompatible.
Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ColorValue | undefined' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").ColorValue | undefined'.
Type 'OpaqueColorValue' is not assignable to type 'ColorValue | undefined'.
Type 'OpaqueColorValue' is not assignable to type 'unique symbol'.
Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof TouchableOpacity, DefaultTheme, { activeOpacity: 0.7; } & ContainerProps, "activeOpacity", typeof TouchableOpacity>): ReactElement<...>', gave the following error.
Type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/react-native/index").ViewStyle>' is not assignable to type 'import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index").StyleProp<import("/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/@types/styled-components/node_modules/@types/react-native/index...'.  TS2769
76 |       inline={inline}
77 |       inlineHeight={inlineHeight ?? 16}
> 78 |       style={style}>
|       ^
79 |       {isLoading ? (
80 |         <Logo
81 |           {...accessibilityAndTestId('button-isloading-icon')}

这是我要设置道具的地方:https://github.com/pass-culture/pass-culture-app-native/blob/master/src/ui/components/buttons/AppButton.tsx#L24

react-native中styled.TouchableOpacity和props.style的分型是什么?

Answer 1

假设react-native版本是0.64.2，答案应该是StyleProp<ViewStyle> | undefined。

TouchableOpacity扩展了TouchableOpacityBase的类型，TouchableOpacityComponent扩展了React.Component<TouchableOpacityProps>。

如果你查看TouchableOpacityProps，你会看到它扩展了TouchableWithoutFeedbackProps，它的styleprop类型为:StyleProp<ViewStyle> | undefined.

(跟随问题描述的更新)此外，您需要使用直接从react-native导入的TouchableOpacity组件:styled(TouchableOpacity)，而不是styled.TouchableOpacity。

Answer 2

样式道具的类型是ViewStyle(就像在文档中写的style?: StyleProp<ViewStyle>一样)。对于基本组件，这通常是正确的，只有<Text>有TextStyle。

这回答你的问题了吗?