Πώς να πλοηγηθείτε σε μια οθόνη χρησιμοποιώντας το useNavigation() στο React Native με TypeScript

Ήθελα να χρησιμοποιήσω το useNavigation για να μεταβώ σε μια οθόνη. Παρακάτω είναι ο κώδικάς μου:

MainNav.tsx:

const defaultNavigationOptions: StackNavigationOptions = {
    ...
    ...
    ...
    headerRight: (props) => {
        return <AccountHeaderComponent tintColor={props.tintColor} />;
    },
    ...
    ...
    ...
};


const MainNavigator = () => {
return (
        <MainStack.Navigator>
            <MainStack.Screen
                name={"VerificationScreen}
                component={VerificationScreen}
            />
        </MainStack.Navigator>
    );
};

Αυτό δημιούργησε μια επικεφαλίδα με ένα εικονίδιο προφίλ όπως στην εικόνα παρακάτω.

όταν κάνετε κλικ σε αυτό, θα μεταβεί στο στοιχείο AccountHeaderComponent

AccountHeaderComponent.tsx:

import AccountsPopUpComponent from "./AccountsPopUpComponent";

export interface AccountHeaderComponentProps {
    tintColor?: string,}

const AccountHeaderComponent = (props: AccountHeaderComponentProps) => {
    const {tintColor} = props;}
    return (<>
          <Modal>
              <AccountsPopUpComponent/>
          </Modal>
          <TouchableOpacity>
              <View>
                  <Icon name={'account-outline'}/>
              </View>
          </TouchableOpacity>
      </>
        </>
    )
};

Σημειώστε ότι εδώ έχω ένα component που ονομάζεται AccountsPopUpComponent

AccountsPopUpComponent.tsx:

const AccountsPopUpComponent = (props: any) => {
    const {onClose} = props;

    const getCurrentPage = () => {
        switch (page) {
            case '':
                return <ProfileComponent />
            default:
                return <DummyComponent/>
        }
    }

    return (
          <View style={{flex: 1}}>{getCurrentPage()}</View>
    )
};

Τέλος, έχω ένα ProfileComponent από το οποίο θέλω να πλοηγηθώ στο VerificationScreen, το οποίο βρίσκεται στον κύριο πλοηγό.

ProfileComponent.tsx:

const ProfileComponent = (props: ProfileComponentProps) => {
  const navigation = useNavigation();

  const gotoVerifyScreen= () => {
    navigation.navigate(VerificationScreen);
  };

  return (
    <>
          <VerifyRibbonComponent
            gotoOTP={gotoVerifyScreen}
          />
    </>
  );
};

εδώ στο gotoVerifyScreen έχω χρησιμοποιήσει το useNavigation για να πάω στην οθόνη επαλήθευσης, αλλά δεν με οδηγεί σε αυτή την οθόνη, όμως αν πατήσω το κουμπί επιστροφής της συσκευής μου τότε μπορώ να δω αυτή την οθόνη. Αυτό δεν είναι ο τύπος της λειτουργικότητας που ήθελα. Θέλω να δω αυτή την οθόνη όταν κάνω κλικ στο VerifyRibbonComponent. Έχω προσπαθήσει πολύ, αλλά δεν μπορώ να βρω το λάθος που κάνω.

Απάντηση #1

Αν χρησιμοποιείτε ένα συστατικό στην κεφαλίδα ενός στοίβου πλοήγησης, θα πρέπει να χρησιμοποιήσετε την πλοήγηση από τα props αντί για το useNavigation (δεν μπορώ να βρω την τεκμηρίωση για αυτό).

Δοκίμασε να αντικαταστήσεις const navigation=useNavigation(); με const navigation=props.navigation;

const defaultNavigationOptions: StackNavigationOptions = {
    ...
    ...
    ...
    headerRight: (props) => {
        return <AccountHeaderComponent 
           {...props} // <--- ADD THIS
           tintColor={props.tintColor} />;
    },
    ...
    ...
    ...
};

const AccountHeaderComponent = (props: AccountHeaderComponentProps) => {
    const {tintColor} = props;}
    return (<>
          <Modal>
              <AccountsPopUpComponent 
                {...props} // <--- ADD THIS
              />
          </Modal>
          <TouchableOpacity>
              <View>
                  <Icon name={'account-outline'}/>
              </View>
          </TouchableOpacity>
      </>
        </>
    )
};

const AccountsPopUpComponent = (props: any) => {
    const {onClose} = props;

    const getCurrentPage = () => {
        switch (page) {
            case '':
                return <ProfileComponent {...props} /> // <--- ADD THIS
            default:
                return <DummyComponent {...props} /> // <--- ADD THIS
        }
    }

    return (
          <View style={{flex: 1}}>{getCurrentPage()}</View>
    )
};

const ProfileComponent = (props: ProfileComponentProps) => {
  const gotoVerifyScreen= () => {
    props.navigation.navigate(VerificationScreen); // <--- CHANGE HERE
  };

  return (
    <>
          <VerifyRibbonComponent
            gotoOTP={gotoVerifyScreen}
          />
    </>
  );
};