javascript - Vad är typningen av props.style i styled.TouchableOpacity-komponenten?

Att använda react-native och styled-components med TypeScript,

Jag vill veta vilken typ props.style har i styled.TouchableOpacity-komponenten för att kunna omsluta stil på den, t.ex:

const Boutton = styled.TouchableOpacity

const Test = () => <Button />

const WrapTest = styled(Test)({
 // add styled
})

För att göra det måste jag ha rätt typ för att tillfredsställa TypeScript:

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

Jag har försökt använda style?: StyleProps<ViewStyle>, men det ger mig följande fel:

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')}

Det här är där jag vill ställa in props: https://github.com/pass-culture/pass-culture-app-native/blob/master/src/ui/components/buttons/AppButton.tsx#L24

Vad är typningen av props.style för styled.TouchableOpacity i react-native?

Svar #1

Om react-native-versionen är 0.64.2, bör svaret vara StyleProp<ViewStyle> | undefined.

TouchableOpacity utökar TouchableOpacityBase, som har typen TouchableOpacityComponent, som utökar React.Component<TouchableOpacityProps>.

Om du tittar i TouchableOpacityProps kommer du att se att det utvidgar TouchableWithoutFeedbackProps, som har sin style-egenskap typad med: StyleProp<ViewStyle> | undefined.

(Efter uppdateringen av frågebeskrivningen) Dessutom behöver du använda TouchableOpacity-komponenten som importeras direkt från react-native: styled(TouchableOpacity) istället för styled.TouchableOpacity.

Svar #2

Typen av en style-prop är ViewStyle (som det står i dokumentationen style?: StyleProp<ViewStyle>). Detta är generellt sant för grundläggande komponenter, endast för <Text> finns det TextStyle.

Svarar detta på din fråga?