React Native 属性“ref”在类型“intrinsicattributes & flatlistprops<unknown>”上不存在。ts(2322)

Question

这是我的组件：

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

// interface IFlatList<ItemT> extends FlatListProps<ItemT> {}

function FlatList<ItemT = any>(props: FlatListProps<ItemT>) {
  return (
    <RNFlatList
      {...props}
      nestedScrollEnabled
      showsVerticalScrollIndicator={false}
      showsHorizontalScrollIndicator={false}
      // Performance settings
      removeClippedSubviews={true} // Unmount components when outside of window
      initialNumToRender={20} // Reduce initial render amount
      maxToRenderPerBatch={20} // Reduce number in each render batch
      updateCellsBatchingPeriod={100} // Increase time between renders
      windowSize={10} // Reduce the window size
    />
  );
}

export default memo(FlatList);

当我打电话时：

<FlatList
    ref={flatListRef}
    // others props
/>

它显示警告作为标题，然后我无法使用

ref

。

我尝试添加

interface ClassAttributes<T> extends Attributes {
    ref?: LegacyRef<T> | undefined;
}

但我仍然找不到将其添加到 props 中的解决方案。

那么我可以自定义组件并使用 React Native 组件的所有默认属性的正确方法在哪里？

Answer 1

我不确定“自定义 FlatList”的实际用例，因为它根本不影响样式。您已经可以使用

renderItem

设置每个项目的样式，因此不需要“自定义 FlatList”。 但如果你真的想，你应该在编写任何自定义组件之前先了解 React 本身中的

ref

，然后再了解

useRef

、

useImperativeHandle

。您必须使用

ref

将

FlatList

传递给

forwardRef

本身。

这是一个例子：

import React, { forwardRef, useRef } from 'react';
import {
  FlatList,
  FlatListProps,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

interface CustomFlatListProps<T> extends FlatListProps<T> {}

export const CustomFlatList = forwardRef<FlatList, CustomFlatListProps<any>>(
  (props, ref) => {
    return <FlatList ref={ref} {...props} />;
  }
);

interface ItemData {
  id: string;
  title: string;
}

const demoData: ItemData[] = [
  { id: '1', title: 'something 1' },
  { id: '2', title: 'something 2' },
  { id: '3', title: 'something 3' },
];

export function DemoUsingCustomFlatList() {
  const flatListRef = useRef<FlatList>(null);

  function _renderItem({ item }: { item: ItemData }) {
    return <Text>{item.title}</Text>;
  }

  return (
    <View>
      <CustomFlatList
        ref={flatListRef}
        data={demoData}
        renderItem={_renderItem}
        keyExtractor={(item) => item.id}
      />

      <TouchableOpacity onPress={() => flatListRef.current?.scrollToEnd()}>
        <Text>Click to scroll to end</Text>
      </TouchableOpacity>
    </View>
  );
}

Answer 2

我从来没有看到这个问题的正确现代答案。 在 React Native 中简单地说

const scrollRef = useRef(null as FlatList<item> | null);

（将“item”替换为您用于数组数据的项目类型）

然后在平面列表中放入：

        ref={(ref) => {
            scrollRef.current = ref;
        }}

之后使用参考就很简单了：

scrollref?.current?.scrollToEnd(); //for example