如何解决我正在尝试使用 AppLoading 来呈现主屏幕组件,但在加载所有内容之前无法保持启动画面
在优化我的图像后,iv 意识到我的组件仍然需要更多时间来加载。它们是带有图像的卡片式组件。
我有 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",},});
解决方法
你在使用 expo 状态栏吗??然后试试这些; 导入启动画面
import * as SplashScreen from 'expo-splash-screen';
在主函数顶部添加这个
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);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。