从 react-native-elements 使用 SearchBar 时出现打字稿错误

Question

我正在使用import { SearchBar } from 'react-native-elements';

它有一个onChangeText 函数，类型为onChangeText: () => any;

我是 onChangeText={(text: string) => console.log("text", text)}，它给了我 ts 错误：

Type '(text: string) => void' is not assignable to type '((text: string) => void) & ((text: string) => void) & (() => any) & (() => any) & (() => any) & ((text: string) => void) & (() => any) & (() => any) & (() => any)'.
  Type '(text: string) => void' is not assignable to type '() => any'

为什么以及这样做的正确方法是什么？

Answer 1

根据this issue，最新版本的类型定义被破坏了。在新版本出来之前，您可以通过以下方式解决问题。

01方式：降级到3.4.0

// npm
npm install react-native-elements@3.4.0

// yarn 
yarn add react-native-elements@3.4.0

---

或

02方式：参考问题中建议的评论一样的基础道具

import { SearchBar } from 'react-native-elements';
import { SearchBarBaseProps } from 'react-native-elements/dist/searchbar/SearchBar';

// Using SearchBarBaseProps instead of SearchBarDefaultProps & SearchBarAndroidProps & SearchBarIOSProps
const SafeSearchBar = (SearchBar as unknown) as React.FC<SearchBarBaseProps>;

const CustomSearchBar = () => {
    return (
        <SafeSearchBar
            platform="default"
            placeholder="Type Here..."
            onChangeText={(text: string) => console.log("text", text)}
            // value={search}
        />
    );
}

Answer 2

这已通过 v4.0 处理。见https://github.com/react-native-elements/react-native-elements/issues/3227#issuecomment-999831580