如何用TypeScript定义React-Native(-Web)中ScrollEvent的类型

首先你需要从react-native包中导入内置的ScrollEvent类型，替换原来的React.SyntheticEvent。该类型默认适配Native端的滚动事件结构，要同时兼容Web端的话，传入对应联合类型的泛型参数即可。

修正后的代码示例 #

// 首先导入类型
import type { ScrollEvent } from 'react-native';
import { Platform } from 'react-native';

// 组件内的onScroll写法
onScroll={(e: ScrollEvent<{ contentOffset: { y: number } } | { target: { scrollTop: number } }>) => {
  let y = 0;

  // 移动端和Web端的滚动数据获取方式不同
  if (Platform.OS !== 'web') {
    // 此时TS会自动收窄类型，识别nativeEvent为Native端结构
    y = e.nativeEvent.contentOffset.y;
  } else {
    // 自动收窄为Web端结构，不会报错
    y = e.nativeEvent.target.scrollTop;
  }

  if (inputLayout.scrollY !== y) {
    setInputLayout({
      ...inputLayout,
      scrollY: y,
    });
  }

  if (isFunction(onScroll)) {
    onScroll(e);
  }
}}

原报错原因说明 #

你之前使用的基础React.SyntheticEvent没有指定nativeEvent的具体类型，默认的Event接口不存在contentOffset、target等滚动事件专属属性，因此触发类型报错。

内容的提问来源于stack exchange，提问作者Velidan