反应导航检查是否存在前一个屏幕答案

【问题标题】：React Navigation check if previous screen exists反应导航检查是否存在前一个屏幕
【发布时间】：2018-07-27 13:49:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

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

例如：

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
}

【讨论】：

【解决方案2】：

有一个更简单的方法：

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

【讨论】：

这个解决方案在大多数情况下已经足够好了，但是如果我需要将第一条路由推入堆栈，而不是 goBack to 怎么办？

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

请提供一段代码的简要说明。
您可能已经很好地回答了这个问题，但是一些关于您如何回答的问题将对未来的读者有所帮助

【解决方案5】：

它完全适合我.... 如果您想从 react native 应用的导航堆栈中找出之前的路线/屏幕名称，以便您可以使用此功能。

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并对你有所帮助；）

【讨论】：