React Native自定义FlatList组件时ref属性类型报错求助

问题核心是你封装的函数组件默认不支持接收ref属性，加上memo包裹后，必须结合forwardRef才能正确传递并兼容原生组件的ref。以下是修正后的完整实现：

基础版本（支持Ref传递） #

import React, { memo, forwardRef } from 'react';
import { FlatList as RNFlatList, FlatListProps } from 'react-native';

// 用forwardRef创建支持ref的组件，内部将ref传递给原生FlatList
const FlatList = memo(forwardRef((props, ref) => (
  <RNFlatList
    {...props}
    ref={ref}
    nestedScrollEnabled
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    // 性能优化配置
    removeClippedSubviews={true}
    initialNumToRender={20}
    maxToRenderPerBatch={20}
    updateCellsBatchingPeriod={100}
    windowSize={10}
  />
)));

export default FlatList;

泛型支持版本（适配任意Item类型） #

如果需要保留原生FlatList的泛型能力，可以调整类型定义：

import React, { memo, forwardRef } from 'react';
import { FlatList as RNFlatList, FlatListProps } from 'react-native';

// 定义带泛型的组件函数
function FlatList<ItemT = any>(
  props: FlatListProps<ItemT>,
  ref: React.Ref<RNFlatList<ItemT>>
) {
  return (
    <RNFlatList
      {...props}
      ref={ref}
      nestedScrollEnabled
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      removeClippedSubviews={true}
      initialNumToRender={20}
      maxToRenderPerBatch={20}
      updateCellsBatchingPeriod={100}
      windowSize={10}
    />
  );
}

// 用forwardRef包装并指定泛型类型，确保TypeScript类型校验正常
const MemoizedFlatList = memo(forwardRef(FlatList) as <ItemT = any>(
  props: FlatListProps<ItemT> & { ref?: React.Ref<RNFlatList<ItemT>> }
) => React.ReactElement);

export default MemoizedFlatList;

关键说明 #

• forwardRef是函数组件接收ref的标准方式，它允许将外部传入的ref直接传递给内部的原生组件
• 类型层面要保证ref的类型与原生RNFlatList的实例类型完全匹配，避免TypeScript报错
• memo需要包裹forwardRef返回的组件，这样既保留性能优化能力，又不破坏ref的传递逻辑

修改完成后，你原来的调用方式就能正常使用ref且不会出现类型错误：

<FlatList
    ref={flatListRef}
    // 其他props
/>

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