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

我有一个后退按钮，可以让用户返回一个屏幕，但当没有屏幕可供返回时，我希望它执行其他操作，因此这是我的代码：

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

{
if（CanGoBack）{//虚构的'CanGoBack'变量
this.props.navigation.goBack（）
}否则{
这个doSomething（）
}
}}/>

我怎样才能做到这一点

注意：这个答案最初是为

react导航
v3.3.0
编写的。您应该检查当前文档中的
react导航
，以确保此功能仍然受支持，并且如果有任何更改/更简单的方法，请参阅

反应导航v3
this.props.navigation
中有一个名为
dangerlygetparent
的函数

它在报告中说明了以下内容：

另一个很好的使用案例是查找活动对象的索引
父级路由列表中的路由。因此，在堆栈的情况下，如果
在索引0处，可能不希望渲染“后退”按钮，但如果
如果您在列表中的其他位置，则将呈现“后退”按钮

因此，我们可以使用以下方法来获取路由的索引

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

因此，我们可以在按下
按钮的
on
中使用此按钮，以以下方式检查我们是否回到路线的起点

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

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

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

{
//检查是否可以返回
让canGoBack=this.props.navigation.canGoBack（）；
//处理好我们所做的我们可以/不能回去
如果（canGoBack）{
this.props.navigation.goBack（）；
}否则{
这个。doSomething（）；
}
}}/>

但是，由于这是一个未记录的api，它很容易更改，因此依赖它可能会有风险。
有一个
canGoBack（）
事件。我正在使用React导航5。虽然我在文件里找不到。检查do
console.log（this.props.navigation）

{
if（this.props.navigation.canGoBack（））{
this.props.navigation.goBack（）
}否则{
这个doSomething（）
}
}}/>
在React navigation 5上，有一个
canGoBack（）
函数，在这种情况下非常有用。
如果您需要使用挂钩，有两个挂钩供您使用；及

根据
useNavigationState

useNavigationState是一个钩子，用于访问导航
包含屏幕的导航器的状态。它在稀有植物中很有用
需要基于导航渲染某些内容的情况
国家

canGoBack（）
方法未记录，但其解释存在于
@react-navigation/native

检查调度回退动作是否由导航处理。注
当结果更改时，此方法不会重新渲染屏幕。所以
不要在
渲染中使用它

此函数在React导航的v5中返回一致（正确）的值

function can_go_back(route, navigation){
   const state = navigation.dangerouslyGetState();
   if(!state || !state.routes){ return(false); }
   const first_route = state.routes[0];
   if(!first_route){ return(false); }
   if(first_route.key === route.key){ return(false); }
   else{ return(true); }
};

或带挂钩：

  const { dangerouslyGetState } = useNavigation()
  const route = useRoute()
  const canGoBack = dangerouslyGetState()?.routes[0]?.key !== route.key

您可以将它与
headerLeft
属性一起使用，将路线和导航传递给它。如下所示（修改后的示例）：

({
标题：“很棒的应用程序”，
headerLeft:函数（）{
如果（！can_go_back（路线、导航）{return（null）；}
否则{
//把你的按钮还给我
}
},
})}
/>

我在使用canGoBack时遇到了问题。当按下屏幕时，它返回一个无效的值。我用它来显示后退按钮（或不显示）当动画将第二个屏幕推到导航器上时，按钮会出现在第一个屏幕上。
如果没有屏幕可供返回，则禁用“返回”按钮如何？我说的是考虑用户体验。如果没有更多屏幕可供返回，则您已到达某种初始屏幕。因此，CanGoBack条件应为检查当前屏幕是否不是初始屏幕的条件。@herodrigues我的初始屏幕不可识别，tab navigator中有四个屏幕，因此我的应用程序以初始屏幕启动，但经过一些导航后，初始屏幕可能来自另一个屏幕！因此在中，我不知道goBack（）是否可以导航回屏幕？使用哪种导航器？
tabNavigator
，
stackNavigator
？@abdumutalabudusamatov hi，
tabNavigator
如何使用钩子？使用钩子更容易，因为可以使用
useNavigation
钩子。``const navigation=useNavigation（）；``然后：``如果（navigation.canGoBack（）{navigation.goBack（）；}```谢谢。在
ReactJS
中如何使用
react路由器
？它不附带useNavigation钩子。我不认为
canGoBack（）的概念
在
Reactjs
中工作。在浏览器中，用户应该来回进出站点，对吗？如果你想限制用户，有钩子
useLocation
和
useHistory
，然后你可以用它们添加自定义逻辑。它仍然存在一些问题。我如何用钩子做到这一点？我没有访问权限对于
此
它仍然存在一些问题，在功能组件的情况下，它并不总是工作，您可以执行1）const navigation=useNavigation（）；2）navigation.canGoBack（）？navigation.goBack（）：Null这是一个有缺陷的解决方案，例如：它不能将选项卡导航作为根目录使用，每个选项卡中都包含堆栈导航。欢迎您编写自己的答案，涵盖您描述的案例。这样可以帮助其他可能有特定问题的人。按下屏幕时，canGoBack可能返回无效值。我用它来渲染一个后退按钮（或者不渲染），在动画中将第二个屏幕推到导航器上时，按钮会出现在第一个屏幕上。我在下面添加了一个答案，解决了我的问题。它仍然有一些问题不总是有效。What isimport { useNavigationState } from '@react-navigation/native';

const Component = (props): React.FC<{}> => {
  //By calling useNavigationState
  const routesLength = useNavigationState(state => state.routes.length);
  //routesLength now holds the size of the routes.
  
  ...
  //Simply checking if routesLength > 0, then navigation can be done
  if(routesLength > 0) {
    props.navigation.navigate('ScreenToNavigate');
  }
  ...
};

import { useNavigation} from '@react-navigation/native';

const Component = (): React.FC<{}> => {
  //By calling useNavigation
  const navigation = useNavigation();
  
  ...
  //E.g., in a button event listener
  if (navigation.canGoBack()) { 
    navigation.goBack();
  }
  ...
};

function can_go_back(route, navigation){
   const state = navigation.dangerouslyGetState();
   if(!state || !state.routes){ return(false); }
   const first_route = state.routes[0];
   if(!first_route){ return(false); }
   if(first_route.key === route.key){ return(false); }
   else{ return(true); }
};

  const { dangerouslyGetState } = useNavigation()
  const route = useRoute()
  const canGoBack = dangerouslyGetState()?.routes[0]?.key !== route.key

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({ route, navigation }) => ({
    title: 'Awesome app',
    headerLeft: function(){
      if(!can_go_back(route, navigation){ return(null); }
      else{ 
         // return your button
      }
    },
  })}
/>