Question

我试图在我的ContextProvider的app.js中获取登录状态，这是我的应用程序的根目录，因此无法通过useContext来获取它。至少我无法做到。我打算基于loginStatus呈现不同的AppStack导航器堆栈，因此我需要在app.js中获取状态。您知道解决此问题的任何方法吗？这是我的app.js文件：

const App = props => {
  const [isLoading, setIsLoading] = useState(true);

  const _cacheResourcesAsync = async () => {
    await Font.loadAsync({
      "poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
      "poppins-medium": require("./assets/fonts/Poppins-Medium.ttf"),
      "poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
      "segoe-ui": require("./assets/fonts/segoe-ui.ttf"),
      "Montserrat-Regular": require("./assets/fonts/Montserrat-Regular.ttf"),
      Dosis: require("./assets/fonts/Dosis.ttf"),
      "FjallaOne-Regular": require("./assets/fonts/FjallaOne-Regular.ttf"),
      "Lobster-Regular": require("./assets/fonts/Lobster-Regular.ttf")
    });
  };
  if (isLoading) {
    return (
      <AppLoading
        startAsync={_cacheResourcesAsync}
        onFinish={() => setIsLoading(false)}
        onError={console.warn}
      />
    );
  } else {
    return (
      <ExperienceProvider>
        <AppProvider>
          <AppStack
            loginStatus={loginStatus}
            ref={navigatorRef => {
              NavigationService.setTopLevelNavigator(navigatorRef);
            }}
          />
        </AppProvider>
      </ExperienceProvider>
    );
  }
};

export default App;

Answer 1

包装Provider中的元素会有所帮助。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles/index.scss";
import * as serviceWorker from "./serviceWorker";
import { LoginProvider } from "./context/loginContext.js";

ReactDOM.render(
<React.StrictMode>
<LoginProvider>
  <App />
</LoginProvider>
</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();

如何通过渲染功能访问app.js中的任何上下文

1 个答案: