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

【问题标题】：React Navigation - goBack() is automatically invoked for stack navigator screenReact Navigation - 堆栈导航器屏幕自动调用 goBack()
【发布时间】：2018-11-20 11:29:53
【问题描述】：

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

当我从 ItemList 执行 navigate('ItemDetail') 时，它导航到屏幕并立即返回 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的sn-p -

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

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

感谢任何帮助。

【问题讨论】：

你能发布你的 ItemDetail 代码，尤其是 componentDidMount 吗？
@dols3m 更新了问题
恐怕这仍然没有给出问题的根源。首先，在您的代码（跨所有组件）中是否有使用 back/goBack 函数的地方？其次，你是让 react-navigation 自己管理状态，还是和 Redux 也挂钩？
好的，所以我没有在我的代码中的任何地方使用 goBack()（使用默认行为）并且导航有自己的状态，而不是与 redux 挂钩。
好的，所以我找到了解决这个问题的方法。以前，我通过主屏幕的路由参数传递 ItemList 所需的数据。从 ItemList 到 ItemDetail 也做了同样的事情——比如 navigation(nextScreen, params) 和访问——在下一个屏幕中的 navigation.getParam(paramName)。我删除了整个“通过参数传递”链并使用 redux 来保持状态并通过 mapStateToProps 传递它。这让它工作了。将路由参数传递到下一个 (n) 堆栈导航屏幕是否有任何限制？

标签： react-native react-redux react-navigation

【解决方案1】：

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

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

clearInterval(this.intervalId);

【讨论】：

【解决方案2】：

在 react-navigation 5 中，您可以使用 useIsFocused 钩子：

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

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

来自文档：https://reactnavigation.org/docs/use-is-focused/

【讨论】：