时间戳

首页 > 解决方案 > 如何在 React 导航 5 堆栈导航器中按下后退按钮导航到屏幕

react-native - 如何在 React 导航 5 堆栈导航器中按下后退按钮导航到屏幕

问题描述

已经回答了许多类似的问题，但没有一个使用最新的 react-navigation 版本。我想在按下后退按钮时从“文档”屏幕转到“主”屏幕。这是我尝试过的，但它不起作用。

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Camera" component={CameraScreen} />
    <Stack.Screen name="Document" component={Document} options={{
      headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
    }} />
  </Stack.Navigator>
</NavigationContainer>

编辑以获得更多说明：我的应用程序从“主页”开始，然后转到“相机”，然后转到“文档”。现在，当我按下手机的后退按钮时，我不想在“文档”时返回“相机”，而是直接返回“主页”。根据文档，这是如何覆盖后退按钮。

<Screen
  name="Home"
  component={HomeScreen}
  options={{
  headerLeft: (props) => (
   <HeaderBackButton
     {...props}
     onPress={() => {
       // Do something
     }}
   />
 ),

}}/>; 但我不知道如何使用上面的代码去“家”。所以我搜索了类似的问题，其中大多数都有navigationOptions和其他的东西。我尝试按照以下问题的答案进行操作。

import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
  return{
    headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}

所以是的，即使我使用 console.log，后退按钮也没有响应

标签： react-nativereact-navigationreact-navigation-stack

解决方案

您可以使用导航“beforeRemove”事件自定义后退按钮行为，该事件在卸载屏幕之前触发。

 useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', e => {
      e.preventDefault(); // Prevent default action
      unsubscribe() // Unsubscribe the event on first call to prevent infinite loop
      navigation.navigate('Home') // Navigate to your desired screen
    });
 }, [])

这种方法的积极点是它会触发任何类型的后退导航，无论是应用内后退按钮还是设备后退按钮/手势。

导航事件文档

推荐阅读