Question

我刚刚升级为SDK 45,我仅发出警告:“超波-波-波-波-波-波-波-波段:使用SplashScreen.preventAutoHideAsync()和SplashScren.hideAsync()而不是

我现在的问题是,他们以“LayOutRootView”为榜样,就根本观点发表看法。现在,我用反应力,把我的根本观点深入到我的申请中。

我是否必须把这一职能从深层的角度来看待,或者是否有办法将这一职能传给我的一个提供者/幸存者? 还是任何其他办法?

//imports


export default App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const scheme = "dark";

  useEffect(() => {
    async function prepare() {
      try {
        // Keep the splash screen visible while we fetch resources
        await SplashScreen.preventAutoHideAsync();
        // Pre-load fonts, make any API calls you need to do here
        await Font.loadAsync(customFonts);
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (appIsReady) {
    return (
      <StripeProvider publishableKey={PUBLISHABLE_KEY}>
        <ThemeProvider theme={scheme === "dark" ? darkTheme : lightTheme}>
          <StatusBar barStyle={scheme === "dark" ? "light-content" : "dark-content"} />
          <OrderProvider>
            <CartProvider>
              <FavoriteProvider>
                <FirebaseProvider>
                  <UserProvider>
                    <NavigationContainer
                      theme={scheme === "dark" ? darkTheme : lightTheme}
                      ref={navigationRef}
                    >
                      <RootStackScreens on/>
                    </NavigationContainer>
                  </UserProvider>
                </FirebaseProvider>
              </FavoriteProvider>
            </CartProvider>
          </OrderProvider>
        </ThemeProvider>
      </StripeProvider>
    );
  } else {
    return null;
  }
};

感谢。

Answer 1

您可在<条码>查询和<条码>查询。

与此类似:

...imports...
import { View } from "react-native";
    
export default App = () => {

 ...code...

 const onLayoutRootView = useCallback(async () => {
  if (appIsReady) {
   await SplashScreen.hideAsync();
  }
 }, [appIsReady]);
    
 if (!appIsReady) {
  return null;
 }
    
 return (
  <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
   <StripeProvider publishableKey={PUBLISHABLE_KEY}>
     ...
   </StripeProvider>
  </View>
 );
}

Answer 2

由于问题使用<代码>NavigationContainer,我认为最好的办法是:expo s Directive ,但修改了该功能返回到onLayoutRootot 浏览至NavigationContainer,而不是View:

return (
...
  <NavigationContainer
    theme={scheme === "dark" ? darkTheme : lightTheme}
    ref={navigationRef}
    onReady={onLayoutRootView} // <-- HERE!
  >
     <RootStackScreens on/>
  </NavigationContainer>
...
)

回答的依据是:。

Answer 3

申辩导航集装箱停泊在Layout 根本意见

 <NavigationContainer onReady={onLayoutRootView}>
    <NavigatorDrawer />
 </NavigationContainer>

Answer 4

这里是我关于我的申请的守则。我将其中多数内容抄录于正式文件 https://docs.expo.dev/versions/latest/sdk/splash-cr/。执行和实施

<NavigationContainer onReady={onLayoutRootView}>
  {children}// its children
</NavigationContainer>

友情链接