React Native Stack导航屏幕不存在

问题描述

在App.js中，我具有以下堆栈导航器：

    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen name="Home">
            {(props) => <HomeScreen {...props} exTradata={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
            <Stack.Screen name="Profile" component={ProfileScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>

在主屏幕中，我试图导航到“配置文件”屏幕：

export default function HomeScreen(props) {
  const onProfilePress = () => {
    props.navigation.navigate('Profile')
  };

  return (
     <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={onProfilePress}>
            <Text style={styles.buttonText}>Profile</Text>
        </TouchableOpacity>
     </View>
   );
}

但是，我得到一个

The action 'NAVIGATE' with payload {"name":"Profile"} was not handled by any navigator.

有人知道如何解决吗？

解决方法

当Profile为true时，

user仅是堆栈的一部分。 也许您打算这样做：

<NavigationContainer>
      <Stack.Navigator>
        {user ? (
<>
          <Stack.Screen name="Home">
            {(props) => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
<Stack.Screen name="Profile" component={ProfileScreen} />
</>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>