React Native Expo点击跳过按钮无法跳转至首页的问题解决

错误原因 #

当用户在WelcomeScreen点击“Skip for now”时，当前导航栈中没有注册Home屏幕。你的导航逻辑是根据isFirstInstall的值动态渲染屏幕：当isFirstInstall为true时，栈里只包含Welcome、SignIn、SignUp三个屏幕，Home并未被添加到导航栈中，所以调用navigation.navigate('Home')会找不到对应屏幕，触发报错。

解决方案 #

方案一：统一注册所有屏幕，控制初始路由（推荐） #

修改app.js中的导航结构，不管isFirstInstall状态如何，先把所有需要的屏幕都注册到Stack导航器中，再通过initialRouteName控制首次加载的屏幕。这样所有屏幕都在导航栈内，跳转不会报错。

修改后的app.js导航代码：

<NavigationContainer>
  {isLoading ? (
    <SplashScreen/> // Show splash screen while loading
  ) : (
    <Stack.Navigator 
      screenOptions={{headerShown: false}}
      // 根据isFirstInstall设置初始路由
      initialRouteName={isFirstInstall === null ? 'Loading' : (isFirstInstall ? 'Welcome' : 'Home')}
    >
      <Stack.Screen name="Loading" component={() => null}/>
      <Stack.Screen name="Home" component={HomeScreen}/>
      <Stack.Screen name="Welcome" component={WelcomeScreen}/>
      <Stack.Screen name="SignIn" component={SignInScreen}/>
      <Stack.Screen name="SignUp" component={SignUpScreen}/>
    </Stack.Navigator>
  )}
</NavigationContainer>

修改后，WelcomeScreen中的handleSkip可保留原来的navigation.navigate('Home')逻辑，因为Home已在栈中注册。

方案二：更新本地状态触发导航重新渲染 #

如果不想把所有屏幕都加入栈，可以通过更新isFirstInstall的本地状态，让导航组件重新渲染，切换到包含Home的栈结构。

1. 在app.js中用useState管理isFirstInstall，并从AsyncStorage初始化：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isFirstInstall, setIsFirstInstall] = useState(null);

  useEffect(() => {
    const initApp = async () => {
      const installStatus = await AsyncStorage.getItem('@firstInstall');
      setIsFirstInstall(installStatus === 'false' ? false : true);
      setIsLoading(false);
    };
    initApp();
  }, []);

  // 其余导航代码...
}

2. 把setIsFirstInstall作为参数传给WelcomeScreen：

<Stack.Screen name="Welcome" component={WelcomeScreen} initialParams={{ setIsFirstInstall }}/>

3. 修改WelcomeScreen的handleSkip，更新状态而非直接跳转：

const WelcomeScreen = ({ navigation, route }) => {
  const { setIsFirstInstall } = route.params;

  const handleSkip = async() => {
    try {
      await AsyncStorage.setItem('@firstInstall', 'false');
      setIsFirstInstall(false); // 更新状态，触发导航重新渲染
    } catch (error) {
      console.error('Error saving first install:', error);
    }
  };

  // 其余代码...
};

当isFirstInstall更新为false后，app.js的导航会重新渲染，自动切换到包含Home的栈结构。

内容的提问来源于stack exchange，提问作者mne