React Navigation 检查上一个屏幕是否存在

Question

我正在拼命寻找一种可能性来检查 ReactNavigation 中是否存在以前的屏幕。

使用 this.props.navigation.goBack() returns false 如果不存在以前的路由，但我不能使用它，因为如果存在以前的路由我会被重定向。

是否可以检查我是否打开了应用程序而不是从另一个屏幕导航到主屏幕？

谢谢。我没有使用 Redux。它会让这些事情变得更容易，但我现在想避免使用它。

Answer 1

可能的解决方案（不确定它是否是最好的）是在前一屏幕的参数对象中花费。这样一来，如果参数存在，则意味着存在上一个屏幕。

例如：

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: { previous_screen: 'CURRENT_SCREEN' },

  action: NavigationActions.navigate({ routeName: 'NEXT_SCREEN' }),
});

this.props.navigation.dispatch(navigateAction);

然后在下一个屏幕中：

const { navigation } = this.props;
if (navigation.state.params && navigation.state.params.previous_screen) {
  // A previous screen exists
} else {
  // No previous screen
}

Answer 2

有一个更简单的方法：

if(this.props.navigation.isFirstRouteInParent()) {
    //a previous screen does not exist
} else {
    //a previous screen does exist
}

Answer 3

const navigateAction = NavigationActions.navigate({
  routeName: 'NEXT_SCREEN',
  action: NavigationActions.navigate({ routeName: 'NEXT_SCREEN', params: { previous_screen: 'CURRENT_SCREEN' } }),
});
this.props.navigation.dispatch(navigateAction);

Answer 4

它完全适合我.... 如果你想从react native app的导航栈中找到以前的route/screen名字，那么你可以使用这个函数。

export const previousRouteName = (navigation) =>{ let navRoutes = navigation.dangerouslyGetParent().state.routes; if (navRoutes.length >= 2){ return navRoutes[navRoutes.length - 2].routeName } return navigation.state.routeName }

如何使用？

previousRouteName(props.navigation);

K00L希望你喜欢对你有帮助;)

Answer 5

从 React Navigation 5 开始，您可以通过这种方式在功能组件中使用 useNavigationState 挂钩：

const routesLength = useNavigationState(state => state.routes.length);
console.log('routesLength', routesLength);

如果routesLength > 1 那么它不是堆栈中的第一个屏幕

或者您可以使用 navigation.canGoBack()

React Navigation 检查上一个屏幕是否存在

React Navigation check if previous screen exists

javascript

reactjs

react-native

react-navigation