无法在一个屏幕上使用useNavigation

Question

[以前，我使用带有切换和模式的导航。但是，现在我要切换到带有挂钩的导航。

我有一个如下所示的AddFriendPage：

export const AddFriendPage: React.FunctionComponent = () => {
  //const [showAddFriendEmailPage, setShowAddFriendEmailPage] = useState(false);
  const navigation = useNavigation();

  // const toggleAddFriendEmailPage = () => {
  //   setShowAddFriendEmailPage(showAddFriendEmailPage ? false : true);
  // };

  return (
    <Modal 
    //visible={showAddFriendPage} 
    //animationType="slide" 
    transparent={true}
    >
      <SafeAreaView >
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <View style={styles.searchTopTextContainer}>
              <Text
                style={styles.searchCancelDoneText}
                //onPress={toggleShowPage}>
                onPress={() => navigation.goBack()}
                >
                Cancel
              </Text>
              <Text style={styles.searchTopMiddleText}>Add Friend</Text>
              <Text style={styles.searchCancelDoneText}>Done</Text>
            </View>
            <View style={styles.searchFieldContainer}>
              <View style={styles.buttonContainer}>
                <Button
                  rounded
                  style={styles.button}
                  //onPress={() => setShowAddFriendEmailPage(true)}>
                  onPress={() => navigation.navigate('AddFriendEmail')}>
                  <Text style={styles.text}>Add by Email</Text>
                </Button>
              </View>
            </View>
          </View>
          {/* <AddFriendEmailPage
            showAddFriendEmailPage={showAddFriendEmailPage}
            toggleShowPage={toggleAddFriendEmailPage}
          /> */}
        </View>
      </SafeAreaView>
    </Modal>
  );
};

我正在尝试导航到另一个页面，但是它不起作用：

onPress={() => navigation.navigate('AddFriendEmail')}

但是，如果我写了其他屏幕的名称，例如('Home')，则导航正常。同样，如果我转到另一个屏幕并尝试导航到AddFriendEmail屏幕，它也可以正常工作。但是在此特定页面AddFriend中不起作用。我该如何解决？

Answer 1

[您可能会忘记将AddFriendEmail定义到app.js或index.js到NavigationContainer中

类似这样的东西

<Stack.Screen name="AddFriendEmail" component={AddFriendEmail} />