时间戳

首页 > 解决方案 > React Navigation - 堆栈导航器屏幕自动调用 goBack()

react-native - React Navigation - 堆栈导航器屏幕自动调用 goBack()

问题描述

我在抽屉导航器中有 3 个堆栈导航器屏幕（主页、项目列表、项目详细信息 -> 相同顺序），并且所有三个屏幕都使用 connect() 帮助程序连接到 redux 存储。

当我navigate('ItemDetail')从 ItemList 执行时，它导航到屏幕并立即返回 ItemList 屏幕。我不确定为什么。

以下是我的导航结构 -

const AppStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    ItemList: {
      screen: ItemListScreen
    },
    ItemDetail: {
      screen: ItemDetailScreen
    }
  },
  {
    initialRouteName: 'Home'
  }
);

const DrawerNav = createDrawerNavigator(
  {
    DrawerApp: AppStack
  },
  {
    drawerPosition: 'right'
  }
);

const SwitchStack = createSwitchNavigator(
  {
    Loading: Loading,
    Auth: AuthStack,
    App: DrawerNav
  },
  {
    initialRouteName: 'Loading'
  }
);

这就是我的每个导航屏幕组件的外观 -

export class ProviderListScreen extends Component {
  render() {
    const { navigation } = this.props;
    // ItemList is hooked up to Redux via connect() helper
    return <ItemList navigation={navigation} />; 
  }

在我的 ItemDetail 组件上，我通过 ItemList 屏幕中的路由参数获取 Item 数据，并且我还在组件中调度了一个操作（重置存储状态的某些部分）。一旦我这样做，就会自动呈现上一个屏幕（ItemList）。

在项目详细信息中，我调用 API 为该项目创建预订，预订对象由 redux 管理。登陆 ItemDetail 后，我会为新的预订数据重置预订对象。

这是 ItemDetail 的 componentDidMount 的片段 -

componentDidMount() {
    this.props.resetItembooking();
  }

我不确定是什么导致了这种行为。如果我删除 ItemList 屏幕并从 HomeScreen 直接跳转到 ItemDetail 屏幕，则不会出现此问题。

任何帮助表示赞赏。

标签： react-nativereact-reduxreact-navigation

解决方案

我遇到了完全相同的问题，但是我尝试了 Awadhoot 给出的原始帖子评论部分中给出的答案，但这对我不起作用。

对于仍在尝试解决此问题的任何人，请确保您没有设置任何重复间隔。因此，在离开之前，您应该始终清除间隔：

clearInterval(this.intervalId);

推荐阅读