如何在react-native / expo中显示闪屏时从另一条路径访问数据？

Question

我正在学习 React Native / Expo 所以这个问题可能听起来很愚蠢。我试图通过上下文页面从页面（在本例中为 inbox.js）加载数据，然后如果数据加载或未加载，我会显示启动屏幕或 inbox.js 页面。

我尝试在所有内容加载到上下文时将 usestate 传递给 false，然后在我的 app.js 中检查它

const Stack = createNativeStackNavigator();


function AppNavigator() {

  const { isLoadingContextOne ,setIsLoadingContextOne }  = useContext(LoadingContextApp);

  

 
  if (isLoadingContextOne) {
    return <SplashScreens />;
  }
  
 const{isLoggedIn,isLoadingContext,loadAsyncData,setIsLoggedIn,setIsLogoutLoading,isLogoutLoading} = useContext(AuthContext);



  
  return (
    <Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
      {isLoggedIn ? (
        <>
        
          <Stack.Screen name="inbox" component={Test} options={{ title: 'inbox Page' }} />
        </>
      ) : (
        <>
          <Stack.Screen name="auth" component={Splash} options={{ title: 'auth Page' }} />
          <Stack.Screen name="Login" component={LoginPage} options={{ title: 'Login Page' }} />
          <Stack.Screen name="Register" component={RegisterPage} options={{ title: 'Register Page' }} />
        </>
      )}
    </Stack.Navigator>
  );
}




export default function App({navigation}) {

  const [IsReady, SetIsReady] = useState(false);
  

  const loadFontsAsync = async () => {
    await Font.loadAsync({
      test: require('./fonts/Unbounded-Bold.ttf'),
      
      
    });
  };
  

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={loadFontsAsync}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }
  

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NotifierWrapper>
      <LoadingProvider>
        <AuthProvider>
          
          <NavigationContainer>
            <AppNavigator />
            <Toast ref={(ref) => Toast.setRef(ref)} />
          </NavigationContainer>
        </AuthProvider>
          </LoadingProvider>

      </NotifierWrapper>
    </GestureHandlerRootView>
  );
}

然后在我的 inbox.js 中

useEffect(() => {
    if (
      !loadingInfoDeLuser &&
      !isLoading &&
      !isLoadingmessage &&
 
    ) {
     
      setIsLoadingContextOne(false); // This will remove the splash screen when all conditions are met
      
    }
  }, [
    loadingInfoDeLuser,
    isLoading,
    isLoadingmessage,
   
  ]);

和背景

import React, { useContext, createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import SplashScreens from './splashFinal';

const LoadingContextApp = createContext();

export const LoadingProvider = ({ children }) => {
  const [isLoadingContextOne, setIsLoadingContextOne] = useState(true);
  

  const setLoaded = () => {
    setIsLoadingContextOne(false);
  };


  
  

  return (
    <LoadingContextApp.Provider value={{ isLoadingContextOne,  setIsLoadingContextOne }}>
      {children}
    </LoadingContextApp.Provider>
  );
};

export default LoadingContextApp;

谢谢你

Answer 1

当启动屏幕显示时，您的收件箱页面似乎将被删除。

我认为最好在页面上显示启动屏幕，而不是在导航堆栈中使用条件渲染。

react-native-splash-screen 这个库可以做到这一点，但需要对本机代码进行一些修改。

如果您想继续使用启动画面组件。 react-native-root-siblings 可以让您将启动屏幕传输到根屏幕上。