来自 Pressable TypeScript 错误的自定义 TouchableOpacity

Question

有这个自定义 TouchableOpacity 函数组件，但对于 style prop 我收到了 TS 错误

\n

import { StyleSheet, Pressable, PressableProps, GestureResponderEvent } from 'react-native';\n\nexport default function TouchableOpacity(props: PressableProps) {\n  const { style, onPress, children } = props;\n\n  return (\n    <Pressable\n      onPress={(event: GestureResponderEvent) => {\n        onPress?.(event);\n      }}\n      style={({ pressed }) => [style, pressed ? styles.buttonPressedOpacity : null]}>\n      {children}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  buttonPressedOpacity: {\n    opacity: 0.5,\n  },\n});\n

\n

以下是完整的 TS 投诉：

\n

\n

TS2322: 类型 '({ pressable}: PressableStateCallbackType) =>\n(StyleProp | ((state: PressableStateCallbackType) =>\nStyleProp<...>) | { ...; })[]' 不可分配给类型\n'StyleProp | ((状态：PressableStateCallbackType) =>\nStyleProp)'。\xc2\xa0\xc2\xa0Type '({按下}:\nPressableStateCallbackType) => (StyleProp | ((state:\nPressableStateCallbackType) => StyleProp<...>) | { ...; })[]' 是不可分配给类型“(state: PressableStateCallbackType) =>\nStyleProp”。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '(StyleProp | ((state:\nPressableStateCallbackType) => StyleProp) | { opacity:\nnumber; })[]' 不可分配给类型 'StyleProp '.\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '(StyleProp | ((state: PressableStateCallbackType) => StyleProp) | { 不透明度:\nnumber; } )[]' 不可分配给类型 'RecursiveArray<ViewStyle |\nFalsy | 注册样式>'。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\n'pop()' 返回的类型在这些类型之间不兼容。\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type\n'StyleProp | ((状态：PressableStateCallbackType) =>\nStyleProp) | { 不透明度：数字；}' 不可分配给\n键入 'ViewStyle | 虚假| RegisteredStyle |\nRecursiveArray<ViewStyle | 虚假| RegisteredStyle> |\nreadonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 \xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0Type '(state: PressableStateCallbackType) => StyleProp' 不可分配给类型 'ViewStyle | Falsy |\n注册样式 | RecursiveArray<ViewStyle | Falsy |\nRegisteredStyle> | readonly (ViewStyle | ... 1 more ... |\nRegisteredStyle<...>)[]'。index.d.ts(542, 5)：预期的类型来自属性“style”，该属性在类型“IntrinsicAttributes & PressableProps & RefAttributes”上声明

\n

\n

Answer 1

style这里的问题是从它接收的类型以及它与您提供给 的prop 的PressableProps函数的连接。的类型如下：stylePressablestyle

const style: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)

样式是StyleProp<ViewStyle> 或一个接收 aPressableStateCallbackType作为输入参数的函数。

style然而， prop 的类型Pressable如下：

PressableProps.style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)

因此，以下内容将起作用：

<Pressable
  style={style}>
</Pressable>

由于类型匹配。

但是，如果您提供接收自己的功能PressableStateCallbackType并且希望将其与附加样式结合起来，那么您有两种可能性。

你知道这style确实是提到的功能

const _style = style as (pressed: PressableStateCallbackType) => StyleProp<ViewStyle>

<Pressable   
  style={(state) => [_style(state), state.pressed && styles.buttonPressedOpacity]}>
</Pressable>

你知道那style是一个StyleProp<ViewStyle>

<Pressable
  style={({pressed}) => [style as StyleProp<ViewStyle>, pressed && styles.buttonPressedOpacity]}>
</Pressable>

你不知道

<Pressable
  style={(state) => [typeof style === 'function' ? style(state) : style, state.pressed && styles.buttonPressedOpacity]}>
</Pressable>

编辑：实际上，如果您知道类型并且它是您的自定义组件，那么您可以更改 .props 的类型TouchableOpacity。