React Native Stack 导航屏幕不存在

Question

在 App.js 中，我有以下 Stack Navigator：

    <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.

有人知道怎么解决吗？

Answer 1

当 user 为真时，

Profile 只是堆栈的一部分。也许你打算做这样的事情：

<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>

React Native Stack 导航屏幕不存在

React Native Stack Navigation Screen Doesn't Exist

react-native

react-native-navigation