react-native - React Native Stack 导航屏幕不存在

Question

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

有谁知道如何解决？

标签： react-nativereact-native-navigation

Answer 1

Profileuser当为真时，它只是堆栈的一部分。也许你打算做这样的事情：

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