android - 无法在 UseEffect React Native 上使用导航用于启动画面

Question

大家好，我正在尝试使用 Stack Navigator 制作启动画面。所以我有 3 个主文件 App.js、Home.js 和 SplashScreenJs。我希望我的启动画面在 5 秒后进入主页，但我负担不起。我能够将控制台日志与 UseEffect 一起使用，但不能与导航一起使用。它显示错误“ReferenceError：找不到变量：导航”

App.js 代码：

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          header: () => null
        }}
      >
        <Stack.Screen 
          name='Splash Screen' 
          component={SplashScreen}
        /> 
        
        <Stack.Screen 
          name='Home' 
          component={Home}
        /> 
      </Stack.Navigator> 
    </NavigationContainer>
  );
};

闪屏.js

const SplashScreen = () => {
  useEffect(() => {
    const timer = setTimeout(()=>{
      navigation.navigate('Home')
    }, 5000);
  });
  
  return (
      <LinearGradient colors={['#53CDE2','rgba(83, 205, 226, 0.43)','rgba(83, 205, 226, 0.25)']} style={styles.SplashWrapper}>
          <Image source={require('../assets/logo.png')}/>
          <Text style={styles.SplashSlogan}>Well Organized, Better Day</Text> 
      </LinearGradient>
  )
}

有人能帮助我吗 ？

标签： androidreact-nativeuse-effect

Answer 1

您必须使用如下所示的导航道具

const SplashScreen = ({navigation}) => {
  useEffect(() => {
    const timer = setTimeout(()=>{
      navigation.navigate('Home');
    }, 5000);
  },[]);