react-native - 基于 redux 状态有条件地在选项卡导航器中渲染不同的堆栈导航器

Question

我的应用程序有一个底部选项卡导航器，其中一个选项卡（Rep）需要根据 redux 状态呈现不同的堆栈导航器。通过在成功验证后运行查询并导航到默认屏幕 (MyPathScreen) 来设置状态。

我尝试实施以下方法：

const isRep = useSelector(selectIsRep);
  return (
    <Tab.Navigator
      initialRouteName="My Path"
      })}>
      <Tab.Screen
        name="Rep"
        component={
          isRep ? RepNavigator : RepApplicationNavigator
        }
        options={{
          tabBarLabel: 'Rep',
        }}
      />
      <Tab.Screen
        name="My Path"
        component={PathNavigator}
        options={{
          tabBarLabel: 'My Path',
        }}
      />
      <Tab.Screen
        name="My Account"
        component={MyAccountNavigator}
        options={{
          tabBarLabel: 'My Account',
        }}
      />
    </Tab.Navigator>
  );
};

TabNavigator但是，在每次登录和注销时，我都会收到以下错误：警告：在呈现不同的组件 () 时无法更新组件 ( MyPathScreen)。我究竟做错了什么？如何避免此错误？

标签： react-native

Answer 1

After some experimenting, I solved this issue with wrapping my dispatch in useEffect.