用户跳过 React Native 博览会后如何导航到主屏幕

Question

我在

app.js

的

navigation

有一些代码

<NavigationContainer>
  {isLoading ? (
    <SplashScreen/> // Show splash screen while loading
  ) : (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      {isFirstInstall === null ? (
        <Stack.Screen name="Loading" component={() => null}/>
      ) : !isFirstInstall ? (
        <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>

welcome

屏幕中的另一个代码，用户可以在其中跳过或登录

const handleSkip = async() => {
  try {
    await AsyncStorage.setItem('@firstInstall', 'false');
    navigation.navigate('Home');
  } catch (error) {
    console.error('Error saving first install:', error);
  }
};
if (isFirstInstall === null) {
  return null;
}

return (
  <View style={styles.container}>
    <StatusBar hidden={true}/>
    <Image
      source={require('../assets/welcomeimage.png')}
      style={styles.welcomeImage}
    />
    <View style={styles.titleContainer}>
      <Text style={styles.titleText}>welcome!</Text>
      <Text style={styles.descriptionText}>
        You get an amazing moment,jump in nowl.
      </Text>
    </View>
    <TouchableOpacity style={[styles.button, styles.fullWidthButton]} onPress={() => navigation.navigate('SignIn')}>
      <Text style={styles.buttonText}>Sign In</Text>
    </TouchableOpacity>
    <TouchableOpacity style={[styles.skipButton, styles.fullWidthButton]} onPress={handleSkip}>
      <Text style={styles.skipButtonText}>Skip for now</Text>
    </TouchableOpacity>
  </View>
);

但是当我暂时单击“跳过”时，会出现以下错误：

ERROR  The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.
Do you have a screen named 'Home'?

如何解决这个问题

Answer 1

我想你的

<Stack.Navigator screenOptions={{ headerShown: false }}>
      {isFirstInstall === null ? (
        <Stack.Screen name="Loading" component={() => null} />
      ) : !isFirstInstall ? (
        <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>

不是您的根导航器，因此您需要导航到堆栈，然后导航到特定屏幕。

navigation.navigate('AuthStack',{ screen: 'Home' });

将 Auth stack 作为您的堆栈名称。

Answer 2

而不是可选渲染您的

Stack.Screen

添加动态初始路由名称：

 <NavigationContainer>
  {isLoading ? (
    <SplashScreen /> // Show splash screen while loading
  ) : (
    <Stack.Navigator initialRouteName={!isFirstInstall ? "Home" : "SignIn"} screenOptions={{ headerShown: false }}>
        <>
          <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>