如何為 React Native Web Pressable 組件正確添加 onHoverIn TS 類型？

Question

我將 React Native Web 與 Typescript 結合使用，我想使用來自 lib 的React Native Web 可按壓組件。

但是，當 VSCode 將諸如onHoverIn之類的 React Native Web 道具類型歸咎於時，我遇到了一個問題。 這種情況下的主要問題是 React Native 道具類型定義不包含來自 RNWeb 的增強道具

有人可以給我一個關於如何以正確的方式解決它的提示嗎？
我不想在我想使用 Pressable 的每個文件中禁用 TS 檢查

這是錯誤消息：

type '{ 
children: Element; 
accessibilityRole: "button"; 
delayLongPress: number; 
disabled: false; 
onHoverIn: () => void; 
onHoverOut: () => void; 
onKeyDown: () => void; 
onLongPress: () => void; 
onPress: () => void; 
onPressIn: () => void; 
onPressOut: () => void; }' is not assignable to type 
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.

Property 'onHoverIn' does not exist on type
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.ts(2322)

代碼示例：

import React from 'react';
import {
  Text, Button, ScrollView, StyleSheet, View, Pressable 
} from 'react-native'; // in webpack conf I have an alias that fetches data from the React Native Web

....

 <Pressable
    accessibilityRole="button"
    delayLongPress={750}
    disabled={false}
    onHoverIn={() => {
      console.log('onHoverIn');
    }}
    onHoverOut={() => {
      console.log('onHoverOut');
    }}
  >
    <Text>Pressable</Text>
  </Pressable>

謝謝你的幫助！

Answer 1

我設法以一種“不錯”的方式解決了這個問題。 它只是創建重新導出原始 Pressable 但包含增強道具的組件包裝器。

我不確定這是“最好的”解決方案，因為我們必須物理創建一些 React 組件作為包裝器，但我們的問題僅與類型有關

工作示例：

// This file is mainly for extending the basic Pressable RN props type
// by the React Native Web-specific properties to avoid TS blaming
import * as React from 'react';
import {
  Pressable as RNWebPressable,
  PressableProps as RNWebPressableProps
} from 'react-native';

export type PressableProps = RNWebPressableProps & {
  // RNWeb properties
  onHoverIn: (e: MouseEvent) => void;
  onHoverOut: (e: MouseEvent) => void;
}

export function Pressable(props: PressableProps) {
  return (
    <RNWebPressable {...props} />
  );
}