typescript - 在 Typescript 中使用附加字段 react native 自定义 TextInput

Question

我想构建一个组件，该组件采用 Icon 参数并将所有其他参数传递给样式化组件 Input(基于 TextInput ).在 Javascript 中，它非常简单:

import React from 'react';
import { TextInput } from 'react-native';
import styled from 'styled-components/native';

const Input = styled.TextInput`
  color: #268596;
`;

export default ({ Icon, ...props }) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);

但是，我想使用 Typescript(我是初学者)。我尝试了以下方法。

import React from 'react';
import { TextInputProps, TextInput } from 'react-native';
import styled from 'styled-components/native';

const Input = styled.TextInput`
  color: #268596;
`;

type InputAreaProps = {
  Icon: React.FC<React.SVGAttributes<SVGElement>>;
} & TextInputProps;

export default ({ Icon, ...props }: InputAreaProps) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);

我获得了 TextInput 参数的所有智能感知和自动完成功能，但 TypeScript 不满意。它一直在这里提示:

    <Input {...props} />
     ^^^^^

然后说:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ allowFontScaling?: boolean | undefined; autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined; autoCorrect?: boolean | undefined; autoFocus?: boolean | undefined; ... 103 more ...; showSoftInputOnFocus?: boolean | undefined; }' is not assignable to type 'Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme">'.
      Types of property 'style' are incompatible.
        Type 'import("/Projects/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/react-native/index").TextStyle>' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle>'.
          Type 'TextStyle' is not assignable to type 'StyleProp<TextStyle>'.
            Type 'import("/Projects/node_modules/@types/react-native/index").TextStyle' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle'.
              Types of property 'color' are incompatible.
                Type 'import("/Projects/node_modules/@types/react-native/index").ColorValue | undefined' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").ColorValue | undefined'.
                  Type 'unique symbol' is not assignable to type 'ColorValue | undefined'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never, typeof TextInput>): ReactElement<StyledComponentPropsWithAs<typeof TextInput, DefaultTheme, {}, never, typeof TextInput>, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ allowFontScaling?: boolean | undefined; autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined; autoCorrect?: boolean | undefined; autoFocus?: boolean | undefined; ... 103 more ...; showSoftInputOnFocus?: boolean | undefined; }' is not assignable to type 'Omit<Omit<TextInputProps & RefAttributes<TextInput>, never> & Partial<Pick<TextInputProps & RefAttributes<TextInput>, never>>, "theme">'.
      Types of property 'style' are incompatible.
        Type 'import("/Projects/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/react-native/index").TextStyle>' is not assignable to type 'import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").StyleProp<import("/Projects/node_modules/@types/styled-components-react-native/node_modules/@types/react-native/index").TextStyle>'

我该怎么做才能让 TypeScript 开心？我可以在哪里尝试自己发现这些东西？

Answer 1

您能否尝试将 TextInput 包装在带样式的组件中，而不是使用点符号。可能在某处与另一个 TextInput 发生冲突。

import { TextInputProps, TextInput } from "react-native";
import styled from 'styled-components';

const Input = styled(TextInput)` // using styled()
  color: #268596;
`;

type InputAreaProps = {
    Icon: React.FC<React.SVGAttributes<SVGElement>>;
} & TextInputProps;

export default ({ Icon, ...props }: InputAreaProps) => (
  <InputArea>
    <Icon fill="#268596" />
    <Input {...props} />
  </InputArea>
);