reactjs - 如何轻松获取 ts 类型的 react-native element prop？

Question

我发现自己最近经常跟风

// MyButton.tsx
import { TouchableWithoutFeedback } from "react-native"

interface Props {
 onPress: () => void
}

//...

<TouchableWithoutFeedback onPress={this.props.onPress} />

本质上，我正在围绕 React 原生组件制作自己的“包装器”组件，这些包装器组件通常采用与它们包装的 React 原生组件类似的 Prop 。我必须总是重新输入这些 Prop 。

我不想扩展原生组件的所有属性，而是公开一些非常具体的属性。做这样的事情会很棒

interface Props = {
  onPress: TouchableWithoutFeedback.onPress
}

不幸的是，这不起作用，但像这样的东西对 Prop 安全有很大帮助，因为我没有定义我自己的类型。

这是否可以通过某种方式实现？

Answer 1

您需要使用类型定义，而不是类本身。假设你已经安装了 @types/react-native:

import { TouchableWithoutFeedbackProps } from 'react-native'

interface Props {
  onPress: TouchableWithoutFeedbackProps["onPress"] // <-- must be bracket notation
}

我认为他们所有的组件 prop 定义都遵循相同的命名模式，所以 View 将是 ViewProps，Text 将是 TextProps 等

括号表示法是因为点表示法只对ts中的命名空间有效