React-Native中createRef报错：Cannot add property value, object is not extensible

我来帮你拆解这个问题的原因和可行的解决办法：

错误原因分析 #

这个错误本质是**React.createRef()创建的ref对象被标记为不可扩展**（通过Object.preventExtensions），而FlatList组件内部的某些逻辑尝试给这个ref对象额外添加value属性，触发了JavaScript的不可扩展对象修改限制。

而Callback Refs之所以没问题，是因为它直接把FlatList的实例引用赋值给你的变量，不需要React维护一个固定的ref对象结构，自然不会碰到这个扩展限制的问题。

解决办法 #

1. 改用Callback Refs（推荐，稳定可靠） #

这是最直接的解决方案，你已经发现这种方式可行，这里给你整理规范的写法：

import React, { PureComponent } from 'react';
import { View, FlatList, Image, ImageStyle } from 'react-native';

// 先定义Props类型，让TypeScript类型检查更严谨
interface ListProps {
  data?: Array<{ id?: number; [key: string]: any }>;
}

export default class List extends PureComponent<ListProps> {
  // 直接声明变量存储FlatList实例，初始值为null
  private flatListRef: FlatList<any> | null = null;

  constructor(props: ListProps) {
    super(props);
  }

  // 建议把renderItem抽成类的私有方法，绑定this更安全
  private _renderItem = ({ item }: { item: typeof this.props.data[0] }) => {
    // 这里填充你的列表项渲染逻辑
    return <View>{/* ... */}</View>;
  };

  render() {
    const { data = [1, 2, 3, 4, 5] } = this.props;
    return (
      <View style={{ paddingBottom: 60, height: "100%" }}>
        <FlatList
          // 使用Callback Refs直接赋值实例
          ref={(ref) => this.flatListRef = ref}
          data={data}
          ListHeaderComponent={
            <Image style={styles.headImg as ImageStyle} source={{ uri: ''}} resizeMode="contain" />
          }
          renderItem={this._renderItem}
          // 加可选链避免item.id不存在时的报错
          keyExtractor={(item, index) => `${item?.id ?? index + 2}`}
          stickyHeaderIndices={[1]}
        />
      </View>
    );
  }
}

// 示例样式，根据你的实际需求调整
const styles = {
  headImg: {
    width: '100%',
    height: 120,
  },
};

2. 升级React Native版本（如果坚持用createRef） #

这个错误大概率是旧版本React Native中FlatList组件对createRef的处理bug，如果你一定要使用React.createRef，可以尝试升级到较新的稳定版本（比如0.68+），这类内部逻辑的bug通常会在后续版本中修复。

3. 检查TypeScript配置（辅助排查） #

确保你的tsconfig.json中没有开启过于严格的对象扩展限制，比如strictPropertyInitialization虽然需要你初始化类属性，但不会直接导致这个问题，不过可以确认下compilerOptions中的target和lib配置是否匹配你的RN版本。

额外提示 #

在使用PureComponent时，虽然createRef本身符合React规范，但Callback Refs在灵活性和兼容性上表现更好，尤其是在处理复杂组件引用时，推荐优先使用这种方式。

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