时间戳

首页 > 解决方案 > 抽屉内的 React Native 嵌套堆栈导航器导致导航上的无限 useEffect 循环

react-native - 抽屉内的 React Native 嵌套堆栈导航器导致导航上的无限 useEffect 循环

问题描述

我正在开发的应用程序包含一个抽屉导航器。我有一个嵌套在它下面的堆栈导航器。该堆栈由 2 个不同的堆栈导航器组成，向用户显示 2 个不同的流程，预订流程和退货流程。如果用户一次可以访问这些进程，则只有一个。因此，当用户完成预订流程时，我切换到 ReturnProcess。

我正在使用 react-native 0.63.2 和 react-navigation 5

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

我在执行 api 请求的 MapScreen 上使用 useEffect 挂钩，并带有清理代码。但是，当我导航到 CreditCardScreen 时，CreditCardScreen 组件不断重新渲染并出现错误：无法找到带有标签 #17473 的阴影视图，这可能是由于本机视图和阴影视图之间的临时不一致造成的，然后超出了最大深度。页面闪烁，直到应用崩溃

我在 MapScreen 中的 useEffect 挂钩，我还尝试使用 react-navigation 库中的 useFocusEffect，但也有帮助：

  useEffect(() => {
    let isMounted = true;
    getDeviceTypes().then(res => {
      //cleanup
      if (isMounted) {
        setDeviceTypes(res.data.data)
        getLocation();
      };

    })
    return () => { isMounted = false }
  }, []);

有人可以帮我解决这个问题，它已经完全阻止了我的进步 2 天。

谢谢

标签： react-nativereact-hooksreact-native-navigation

解决方案

我最终通过将 BookingProcess 和 ReturnProcess 移到 Booking 方法之外来修复它。

推荐阅读