使用Typescript中的附加字段响应本机自定义文本输入

我想构建一个组件，它接受一个

图标

参数，并将所有其他参数传递给一个样式化组件

输入

（基于

文本输入

）。在Javascript中，它非常简单：

从“React”导入React；
从“react native”导入{TextInput}；
从“样式化组件/本机”导入样式化；
常量输入=styled.TextInput`
颜色：#268596；
`;
导出默认值（{Icon，…props}）=>(
);

然而，我想使用Typescript（我是个初学者）。我尝试了以下方法

从“React”导入React；
从“react native”导入{TextInputProps，TextInput}；
从“样式化组件/本机”导入样式化；
常量输入=styled.TextInput`
颜色：#268596；
`;
类型InputAreaProps={
图标：React.FC；
}&TextInputProps；
导出默认值（{Icon，…props}:InputAreaProps）=>(
);

我获得了

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

没有与此调用匹配的重载。
重载2的第1个，'（props:Omit&{…；}&{…；}&{…；}）：ReactElement'给出了以下错误。
类型“{allowFontScaling？：boolean |未定义；autoCapitalize？：“无”|“句子”|“单词”|“字符”|未定义；自动更正？：boolean |未定义；自动对焦？：boolean |未定义；…103更多…；ShowSoftInputInfo？：boolean |未定义；}”不可分配给类型“忽略”。
属性“样式”的类型不兼容。
类型“导入（“/Projects/node\u modules/@types/react native/index”）.StyleProp”不可分配给类型“导入（“/Projects/node\u modules/@styled components react native/node\u modules/@types/react native/index”）.StyleProp”。
类型“TextStyle”不可分配给类型“StyleProp”。
类型“导入”（“/Projects/node\u modules/@types/react native/index”）.TextStyle”不能分配给类型“导入”（/Projects/node\u modules/@types/styled components react native/node\u modules/@types/react native/index”）.TextStyle”。
属性“颜色”的类型不兼容。
类型“导入”（“/Projects/node_modules/@types/react native/index”）。ColorValue“未定义”不可分配给类型“导入”（/Projects/node_modules/@types/styled components react native/node_modules/@types/react native/index”）。ColorValue“未定义”。
类型“unique symbol”不可分配给类型“ColorValue | undefined”。
重载2/2'（props:StyledComponentPropsWithAs）：ReactElement'产生以下错误。
类型“{allowFontScaling？：boolean |未定义；autoCapitalize？：“无”|“句子”|“单词”|“字符”|未定义；自动更正？：boolean |未定义；自动对焦？：boolean |未定义；…103更多…；ShowSoftInputInfo？：boolean |未定义；}”不可分配给类型“忽略”。
属性“样式”的类型不兼容。
类型“导入”（“/Projects/node\u modules/@types/react native/index”）.StyleProp”不能分配给类型“导入”（/Projects/node\u modules/@types/styled components react native/node\u modules/@types/react native/index”）.StyleProp'

---

我该怎么做才能让打字脚本开心呢？我自己可以在哪里找到这些东西呢？

你可以尝试将

TextInput

包装在样式化组件中，而不是使用点符号吗。可能与其他文本输入存在冲突

从“react native”导入{TextInputProps，TextInput}；
从“样式化组件”导入样式化；
const Input=styled（TextInput）`//using styled（）
颜色：#268596；
`;
类型InputAreaProps={
图标：React.FC；
}&TextInputProps；
导出默认值（{Icon，…props}:InputAreaProps）=>(
);

成功了，谢谢！但我不明白它为什么会起作用。我深入研究了代码，我发现您应该使用

样式化的组件react native

，对吗<代码>样式化组件react native包含其自己的react native组件定义，该定义与

react native

定义冲突。您使用的是“react-native”中的TextInputProps，但Input->TextInputProps使用的是

样式化组件react-native

one。因此，类型不匹配是有意义的，再次感谢！使用样式化（TextInput）将使用back

react native

类型定义，并且

TextInputProps

也来自

react native

端。因此，问题解决方案我检查他们是否正在解决一些问题。也许有一个和你的案子有关