React Native 与 Context API 警告：“允许要求循环，但可能导致未初始化的值......”

当我在我的 Expo React Native 项目中使用 React 的 Context API 时，收到此警告：

允许要求循环，但可能会导致未初始化的值。考虑重构以消除对循环的需要。

我在 App.tsx 中创建一个上下文：

import Start from "./start";

export const AppContext = React.createContext({
  isLandscape: true,
});

export default function App() {
  return (
    <AppContext.Provider value={{ isLandscape: false }}>
      <Start />
    </AppContext.Provider>
  );
}

在 Start.tsx 组件中，我使用上下文：

import { AppContext } from "./App"

export default function App() {
  const context = React.useContext(AppContext);
  console.log(context);

  return (
    <Text>Sutff</Text>
  );
}

我看起来警告是因为App进口Choose然后从中导入上下文App again. 允许要求循环，但可能会导致未初始化的值。考虑重构以消除对循环的需要 https://stackoverflow.com/questions/55664673/require-cycles-are-allowed-but-can-result-in-uninitialized-values-consider-ref

但这不是 Context API 应该使用的方式吗？在 React Native 中使用 Context API 时，人们通常如何处理这个问题？

要打破循环，请将共享上下文移动到单独的文件中。

// in AppContext.js

export const AppContext = React.createContext({
  isLandscape: true,
});

然后在App.js and Start.js，从该文件导入上下文。

import { AppContext } from './AppContext'

因此，您现在拥有 App -> AppContext 和 Start -> AppContext，而不是让 App Start 相互依赖，从而打破了循环。