反应导航-堆栈导航器屏幕会自动调用goBack()

时间:2018-11-20 11:29:53

标签: react-native react-redux react-navigation

我在抽屉式导航器中有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的摘要-

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

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

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

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

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

clearInterval(this.intervalId);

答案 1 :(得分:0)

在 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/