使用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')}
這是我想設定道具的地方：https : //github.com/pass-culture/pass-culture-app-native/blob/master/src/ui/components/buttons/AppButton.tsx#L24
什么是的打字props.style了styled.TouchableOpacity在react-native？
uj5u.com熱心網友回復：
假設 react-native 版本是 0.64.2，答案應該是StyleProp<ViewStyle> | undefined.
TouchableOpacityextends TouchableOpacityBase，它的型別為TouchableOpacityComponent，它擴展了React.Component<TouchableOpacityProps>。
如果你仔細觀察TouchableOpacityProps，你會看到它 extends TouchableWithoutFeedbackProps，它的styleprop 型別是 :
StyleProp<ViewStyle> | undefined。
（按照問題描述的更新）此外，您需要使用TouchableOpacity直接從react-native:匯入的組件styled(TouchableOpacity)而不是styled.TouchableOpacity.
uj5u.com熱心網友回復：
樣式道具的型別是ViewStyle（就像它寫在 docs style?: StyleProp<ViewStyle>）。這通常適用于基本組件，僅適用于<Text>存在TextStyle.
這回答了你的問題了嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326556.html
標籤：javascript 反应 打字稿 反应原生 样式组件