使用 Typescript 中的附加字段反应本机自定义 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

您可以尝试包装TextInputin 样式组件而不是使用点表示法吗？也许与某个地方的另一个 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>
);