我在抽屉式导航器中有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屏幕,则不会发生此问题。
感谢您的帮助。
答案 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>;
}