使用NavigationService在react組件之外的react native中導航，彈出，重置

Question

我將在react組件之外使用react navigation ，因此我無法訪問props，我可以通過它進行navigate但是我不知道如何實現它以進行reset並pop這是我的navigate代碼：

import {NavigationActions} from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

export default {
    navigate,
    setTopLevelNavigator,
};

Answer 1

在NavigationService中首次導入StackAction

import {
  NavigationActions,
  StackActions,
} from "react-navigation";

添加彈出和替換功能

function replace(routeName, params) {
  _navigator.dispatch(
    StackActions.replace({
      routeName,
      params
    })
  );
}

function pop(number = 1) {
  _navigator.dispatch(
    StackActions.pop({
      n: number
    })
  );
}

注意：彈出窗口具有彈出多少個屏幕的參數。 默認值為1表示當前屏幕

Answer 2

這樣，您可以使用導航，彈出，重置：

refrence：

https://reactnavigation.org/docs/en/navigation-actions.html

https://reactnavigation.org/docs/en/navigation-actions.html

import {NavigationActions, StackActions} from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

function reset(routeName, params) {
    const resetAction = StackActions.reset({
        index: 0, actions: [NavigationActions.navigate({routeName, params})]
    });
    _navigator.dispatch(resetAction);
}

function pop(n = 1) {
    const popAction = StackActions.pop({
        n,
    });

    _navigator.dispatch(popAction);
}

export default {
    navigate,
    pop,
    reset,
    setTopLevelNavigator,
};