如何检查 goBack() 函数在反应导航中是否可行? [英] how to check if goBack() function is doable in react navigation?

问题描述

我有一个后退按钮，可以让用户返回屏幕，但是当没有屏幕可以返回时，我希望它做其他事情，所以这是我的代码:

I have a back button that takes the user a screen back, but when there are no screens left to go back, I want it to do something else so this is my code:

<Button onPress={()=>{
   if(CanGoBack){ // imaginary 'CanGoBack' variable
     this.props.navigation.goBack()
   }else{
     this.doSomething()
   }
}}/>

我怎样才能做到这一点?

how can I achieve this?

推荐答案

注意这个答案最初是为 react-navigation v3.3.0 编写的.您应该检查 react-navigation 的当前文档，以确保它仍然受支持，以及是否有任何更改/更简单的方法.

Note this answer was originally written for react-navigation v3.3.0. You should check the current documentation for react-navigation to make sure that this is still supported and if there are any changes/easier methods.

React-Navigation v3

this.props.navigation 中有一个函数叫做 dangerouslyGetParent.

React-Navigation v3

There is a function in this.props.navigation called dangerouslyGetParent.

它在文档中陈述了以下内容:

另一个很好的用例是找到活动的索引父路由列表中的路由.所以在堆栈的情况下，如果你是在索引 0 处，您可能不想呈现后退按钮，但如果您位于列表中的其他位置，然后您将呈现后退按钮.

Another good use case for this is to find the index of the active route in the parent's route list. So in the case of a stack if you are at index 0 then you may not want to render a back button, but if you're somewhere else in the list then you would render a back button.

所以我们可以使用下面的来获取路线的索引

So we can using the following to get the index of the route

this.props.navigation.dangerouslyGetParent().state.index

所以我们可以通过以下方式在 Button 的 onPress 中使用它来检查我们是否回到了路线的起点.

So we could use this in the onPress of your Button in the following way to check if we are back at the start of the route.

<Button onPress={() => {
  // get the index of the route
  let index = this.props.navigation.dangerouslyGetParent().state.index;
  // handle the index we get
  if (index > 0) {
    this.props.navigation.goBack();
  } else {
    this.doSomething();
  }
}}/>

---

React-Navigation v5 更新

从文档，我们可以看到dangerouslyGetParent 仍然存在.

---

Update for React-Navigation v5

From the documentation, we can see that dangerouslyGetParent still exists.

此方法从父导航器返回导航道具当前导航器嵌套在其中.例如，如果您有一个堆栈导航器和嵌套在堆栈中的选项卡导航器，然后您可以在选项卡导航器的屏幕内使用危险的GetParent 来获取从堆栈导航器传递的导航道具.

This method returns the navigation prop from the parent navigator that the current navigator is nested in. For example, if you have a stack navigator and a tab navigator nested inside the stack, then you can use dangerouslyGetParent inside a screen of the tab navigator to get the navigation prop passed from the stack navigator.

因此可以在 v5 中对 v3 使用上述方法.

So it could be possible to use the above method for v3 in v5.

还有一个未公开的 api，名为 canGoBack().这可以通过以下方式从导航道具访问:

There is also an undocumented api called canGoBack(). This can be accessed from the navigation props in the following way:

this.props.navigation.canGoBack()

如果您能够返回堆栈，此属性将返回一个布尔值.这意味着我们可以通过以下方式更新我们为 v3 所做的代码.

This property returns a boolean value if you are able to go back in the stack. Meaning we can update the code that we did for v3 in the following way.

<Button onPress={() => {
  // check to see if it is possible to go back
  let canGoBack = this.props.navigation.canGoBack();
  // handle what we do it we can/cannot go back
  if (canGoBack) {
    this.props.navigation.goBack();
  } else {
    this.doSomething();
  }
}}/>

然而，由于这是一个未记录的 API，它很可能会发生变化，因此依赖它可能会有风险.

However, as this is an undocumented api it is liable to change so it could be risky relying on it.

这篇关于如何检查 goBack() 函数在反应导航中是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！