时间戳

首页 > 解决方案 > 我正在尝试使用 AppLoading 来呈现主屏幕组件，但在加载所有内容之前无法让初始屏幕保持不变

react-native - 我正在尝试使用 AppLoading 来呈现主屏幕组件，但在加载所有内容之前无法让初始屏幕保持不变

问题描述

在优化我的图像后，我意识到我仍然需要更多时间来加载我的组件。它们是带有图像的卡片状组件。

我有 2 个要加载的组件，一个在 flatList 中，另一个只是一个基本的卡片式组件，每个组件都包含图像。我一直在徒劳地试图让它发挥作用，并且不得不询问是否有人有一个好的解决方案。这是我到目前为止所拥有的。

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import AppLoading from "expo-app-loading";

import Header from "./components/Header";
import HomeScreen from "./screens/HomeScreen";

const fetchHomeScreen = () => {
  return HomeScreen.loadAsync({
    HomeScreen: require("./screens/HomeScreen"),
    Header: require("./components/Header"),
  });
};

export default function App() {
  const [HomeScreenLoaded, setHomeScreenLoaded] = useState(false);

  if (!HomeScreenLoaded) {
    return (
      <AppLoading
        startAsync={fetchHomeScreen}
        onFinish={() => setHomeScreenLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  return (
    <View style={styles.screen}>
      <Header title="Your Beast Log" />
      <HomeScreen />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: "#3E3636",
  },
});

标签： react-nativereact-hooksreact-native-androidreact-native-iossplash-screen

解决方案

您在使用博览会状态栏吗？然后试试这些；导入启动画面

import * as SplashScreen from 'expo-splash-screen';

将此添加到 main 函数的顶部

SplashScreen.preventAutoHideAsync()
export default function App() {....}

然后将此添加到您隐藏启动画面的屏幕中

const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
    if(appIsready) {
        (async () => {
            await SplashScreen.hideAsync();
        })()
    }
},[appIsReady])

async function prepare() {
  try {
    await fetchHomeScreen;
    //OR
    await HomeScreen.loadAsync({
              HomeScreen: require("./screens/HomeScreen"),
              Header: require("./components/Header"),
          });
  } catch (e) {
        console.warn(e);
  } finally {
    // Tell the application to render
    setAppIsReady(true);
  }
}

推荐阅读