如何检查goBack（）函数在反应导航中是否可行？

Question

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

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

我该如何实现？

Answer 1

有一个函数this.props.navigation叫dangerouslyGetParent。您可以在此处的文档中看到它。

它在文档中指出以下内容：

另一个很好的用例是在父级路由列表中找到活动路由的索引。因此，在堆栈的情况下，如果索引为0，则可能不需要渲染后退按钮，但是如果您在列表中的其他位置，则将渲染后退按钮。

因此我们可以使用以下内容获取路线的索引

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

因此，我们可以通过以下方式在onPress您的Button中使用它，以检查我们是否回到路线的起点。

<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();
  }
}}/>

Answer 2

在 React 导航 5 上，有一个canGoBack()功能在这种情况下非常有用。