reactjs - react native typescript Ingen överbelastning matchar detta anrop

Jag är ny på typescript och jag använder react native. Jag lade till en style på ett view-element och jag får felen nedan.

Kan någon snälla förklara vad problemet är och vad jag kan göra för att åtgärda det?

Här är min styles component

import StyleSheet from 'react-native-media-query';
import { useMediaQuery } from 'react-responsive'

const { ids, styles } = StyleSheet.create({
  viewStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    '@media (min-width: 1400px)': {
      width: "20%"
    },
    '@media (min-width: 1000px)': {
      width: "30%"
    },
    '@media (max-width: 1000px) and (min-width: 700px)': {
      width: "60%"
    },
    '@media (max-width: 700px)': {
      width: "70%"
    },
    '@media (max-width: 700px)': {
      width: "90%"
    }


  },
  inputStyle: {
    padding: "10px"
  },
  emailContainer: {
    justifyContent: "center",
    AlignItems: "center",
    alignSelf: "center",
    ...Platform.select({
      native: {
        margin: 40,
      },
      web: {
        maxHeight: "10%",
      },
    }),
  },
});

export { ids, styles };

Och här är min komponent som använder stilen

import { Input, Button } from "@rneui/themed";
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { ids, styles } from "./styles";

export default function InitialEmailComponent() {
  const [email, setEmail] = useState<string>("");
  const [emailError, setEmailError] = useState<string>("");

  const handleEmailSubmit = async () => {
    debugger;
  };

  return (
    <View style={styles.viewStyle} dataSet={{ media: ids.viewStyle }} >
      <Input
        inputStyle={styles.inputStyle}
        id="register-email-input"
        placeholder={"Enter your email"}
        onChangeText={(email) => setEmail(email)}
        errorStyle={{ color: "red" }}
        errorMessage={emailError}
      />
      <Button
        id="register-email-submit"
        title="Submit"
        onPress={handleEmailSubmit}
      />
    </View>
  );
}

src/components/auth/initialEmailComponent/index.tsx:15:11 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<ViewStyle>'.
      Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'StyleProp<ViewStyle>'.
        Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'ViewStyle'.
          Types of property 'backfaceVisibility' are incompatible.
            Type 'TextStyle | ViewStyle | "visible" | "hidden" | ImageStyle | undefined' is not assignable to type '"visible" | "hidden" | undefined'.
              Type 'TextStyle' is not assignable to type '"visible" | "hidden" | undefined'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<ViewStyle>'.

15     <View style={styles.viewStyle}
             ~~~~~

  node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:234:3
    234   style?: StyleProp<ViewStyle> | undefined;
          ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'
  node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:234:3
    234   style?: StyleProp<ViewStyle> | undefined;
          ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

src/components/auth/initialEmailComponent/index.tsx:19:9 - error TS2322: Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; } | {} | ({ ...; } & {}) | ({ ...; } & {})' is not assignable to type 'StyleProp<TextStyle>'.
  Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'StyleProp<TextStyle>'.
    Type '{ position?: "fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined; backfaceVisibility?: TextStyle | ... 4 more ... | undefined; ... 73 more ...; translateY?: TextStyle | ... 3 more ... | undefined; }' is not assignable to type 'TextStyle'.
      Types of property 'position' are incompatible.
        Type '"fixed" | TextStyle | ViewStyle | "static" | "relative" | "absolute" | "sticky" | ImageStyle | undefined' is not assignable to type '"fixed" | "static" | "relative" | "absolute" | "sticky" | undefined'.
          Type 'TextStyle' is not assignable to type '"fixed" | "static" | "relative" | "absolute" | "sticky" | undefined'.

19         inputStyle={styles.inputStyle}
           ~~~~~~~~~~

  node_modules/@rneui/base/dist/Input/Input.d.ts:15:5
    15     inputStyle?: StyleProp<TextStyle>;
           ~~~~~~~~~~
    The expected type comes from property 'inputStyle' which is declared here on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; } & RefAttributes<PropsWithChildren<InputProps>>'


Found 2 errors in the same file, starting at: src/components/auth/initialEmailComponent/index.tsx:15

Svar #1

För det första tror jag inte att du kan använda mediefrågor på det sättet på en View-komponent (t.ex. '@media..etc'), eftersom komponenten 'View' inte har de alternativen tillåtna i sina 'style'-attribut.

För det andra är 'padding' i dina inmatningsstilar inte tillåtet av TextStyle.

Jag skulle föreslå att du granskar dessa två länkar, som innehåller alla möjliga ViewStyle- och TextStyle-attribut:

https://reactnative.dev/docs/view-style-props

https://reactnative.dev/docs/text-style-props

'Layout'-egenskaper är också tillgängliga för View-komponenter, vilket är anledningen till att saker som flex fungerar i din kod:

https://reactnative.dev/docs/layout-props

Svar #2

Du använder CSS media query-egenskaper som inte stöds på React Native.

'@media (min-width: 1400px)': {
      width: "20%"
    },
    '@media (min-width: 1000px)': {
      width: "30%"
    },
    '@media (max-width: 1000px) and (min-width: 700px)': {
      width: "60%"
    },
    '@media (max-width: 700px)': {
      width: "70%"
    },
    '@media (max-width: 700px)': {
      width: "90%"
    }

Du kan hitta alla stödda stil-egenskaper här - https://github.com/vhpoet/react-native-styling-cheat-sheet

Detta gäller detta bibliotek - https://www.npmjs.com/package/react-responsive som är utformat för att fungera endast med webbläsare.