React Native Native stack导航器在抽屉内导致导航上的无限useEffect循环
React Native Native stack导航器在抽屉内导致导航上的无限useEffect循环
提问于 2021-01-15 21:01:24
我正在开发的应用程序包含一个抽屉导航器。我有一个堆栈导航器嵌套在它下面。这个堆栈由两个不同的堆栈导航器组成，向用户显示两个不同的流程，预订流程和退货流程。如果用户一次可以访问这些进程，则只有一个进程可以访问。因此，当用户完成预订过程时，我会切换到ReturnProcess。
我使用的是react-native 0.63.2和react-Navigation5
// The stack containing the 2 other nested stacks
<BookingStack.Navigator initialRouteName="Booking" screenOptions={{ headerShown: false }} >
<BookingStack.Screen name="Booking" component={BookingProcess} />
<BookingStack.Screen name="Return" component={ReturnProcess} />
</BookingStack.Navigator>
// booking process stack
function BookingProcess() {
return (
<BookingProcessStack.Navigator initialRouteName="Map" screenOptions={{ headerShown: false }}>
<BookingProcessStack.Screen name="Map" component={MapScreen} />
<BookingProcessStack.Screen name="CardDetails" component={CreditCardDetailsScreen} />
... (rest of the screens)
</BookingProcessStack.Navigator>
);
}
//return process stack
const ReturnProcess = () => {
return (
<ReturnProcessStack.Navigator initialRouteName="MapDirections" screenOptions={{ headerShown: false }}>
<ReturnProcessStack.Screen name="MapDirections" component={MapDirectionsScreen} />
<ReturnProcessStack.Screen name="Queue" component={QueueScreen} />
...(rest of the screens)
</ReturnProcessStack.Navigator>
);
}和我的抽屉导航器，它包含堆栈，组合了其他两个：
<UserDrawer.Screen name="Map" options={{
drawerLabel: () => <Text style={styles.menuItemText}>Map</Text>,
drawerIcon: () => <Icon type="entypo" name="location-pin" />,
}}
component={Booking} />我在MapScreen上使用了一个api钩子，它执行一个带有清理代码的useEffect请求。然而，当我导航到CreditCardScreen时，CreditCardScreen组件继续重新渲染，并显示错误:找不到标记为#17473的阴影视图，这可能是由于本机视图和阴影视图之间暂时不一致，然后超过了最大深度。页面会一直闪烁，直到应用程序崩溃
我在MapScreen中的useEffect钩子，我也尝试过使用react导航库中的useFocusEffect，但也有帮助：
useEffect(() => {
let isMounted = true;
getDeviceTypes().then(res => {
//cleanup
if (isMounted) {
setDeviceTypes(res.data.data)
getLocation();
};
})
return () => { isMounted = false }
}, []);有没有人能帮帮我，我的进度已经完全停顿了两天。
谢谢
回答 1
Stack Overflow用户
发布于 2021-01-15 22:47:51
我最终通过将BookingProcess和ReturnProcess移出Booking方法修复了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65736585
复制相关文章
相似问题
腾讯云开发者
