React Native中使用Context API报错：Attempted to assign to readonly property

我在React Native应用中尝试使用React的Context API，但每次使用Context Provider时都会报错，无法理解错误原因。以下是我的代码：

代码示例 #

PlayerContext.ts #

import React from "react";
export const PlayerContext = React.createContext(222);

PlayerContextProvider.tsx #

import React from "react";
import { PlayerContext } from "./PlayerContext";

export default class PlayerContextProvider extends React.Component {
  public render() {
    return (
      <PlayerContext.Provider value={222}>
        {this.props.children}
      </PlayerContext.Provider>
    );
  }
}

HomePage.tsx #

import * as React from "react";
import { Text } from "react-native";
import PlayerContextProvider from "./Player/PlayerContextProvider";

export default class HomePage extends React.Component {
  public render() {
    return (
      <PlayerContextProvider>
        <Text>test</Text>
      </PlayerContextProvider>
    );
  }
}

错误信息 #

Attempted to assign to readonly property. popProvider ReactNativeRenderer-dev.js:12077:12 unwindWork [...]

请问我哪里操作出错了？

这个错误通常和React Native与React版本的兼容性、或者class组件形式的Context Provider在特定场景下的渲染问题有关。这里有几个可行的解决方案：

1. 将Class组件形式的Provider改为函数组件 #

在React Native的某些版本中，class组件实现的Context Provider可能会触发这类只读属性赋值的错误。尝试把PlayerContextProvider改成函数组件形式：

// PlayerContextProvider.tsx
import React from "react";
import { PlayerContext } from "./PlayerContext";

export default function PlayerContextProvider({ children }) {
  return (
    <PlayerContext.Provider value={222}>
      {children}
    </PlayerContext.Provider>
  );
}

函数组件的写法更简洁，也更符合现代React的最佳实践，同时能避免class组件在Context渲染流程中可能出现的奇怪问题。

2. 检查React与React Native的版本兼容性 #

这个错误也可能是因为你使用的React版本和React Native版本不匹配导致的。React Native对React的版本有严格要求，比如：

• React Native 0.68.x 需要 React 18.0.0
• React Native 0.67.x 需要 React 17.0.2
• React Native 0.66.x 需要 React 17.0.2

你可以查看项目根目录的package.json，确认react和react-native的版本是否匹配。如果不匹配，升级或降级到对应版本即可：

# 比如升级到匹配的版本（根据你的React Native版本调整）
npm install react@18.0.0 --save

3. 确认Context的使用方式正确 #

虽然你的代码看起来没问题，但再检查几个细节：

• 确保PlayerContext的导入路径正确，没有拼写错误
• 确保PlayerContextProvider确实包裹了需要访问Context的组件（你的HomePage里已经做到了）
• 如果你后续要在子组件中使用Context，确保用useContext钩子（函数组件）或者static contextType = PlayerContext（class组件）来正确获取

尝试上面的方案，应该能解决这个错误。

内容的提问来源于stack exchange，提问作者Fábio Nascimento