使用react-native和styled-components使用 TypeScript，
我想知道props.style的输入是什么在styled.TouchableOpacity组件以便能够在其上包装样式，例如:
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')}
这是我要设置 Prop 的地方:https://github.com/pass-culture/pass-culture-app-native/blob/master/src/ui/components/buttons/AppButton.tsx#L24
props.style 的输入是什么对于 styled.TouchableOpacity在react-native ？
最佳答案
假设react-native版本是0.64.2，那么答案应该是StyleProp<ViewStyle> | undefined .
TouchableOpacity延伸TouchableOpacityBase ，其类型为 TouchableOpacityComponent ，延伸React.Component<TouchableOpacityProps> .
如果你查看TouchableOpacityProps ，你会看到它扩展了 TouchableWithoutFeedbackProps ，其中有 style Prop 输入:
StyleProp<ViewStyle> | undefined .
(随着问题描述的更新)此外，您需要使用 TouchableOpacity直接从 react-native 导入组件:styled(TouchableOpacity)而不是styled.TouchableOpacity .
关于javascript - styled.TouchableOpacity 组件中 props.style 的类型是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69627747/