微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

RootNavigator 在 React Native 0.63.3 中渲染两次

如何解决RootNavigator 在 React Native 0.63.3 中渲染两次

这是我们的 React Native 应用程序的 RootNavigator。出于某种原因,它渲染了两次,谁能解释一下原因。它位于封装在 mobx 商店提供程序中的顶级应用组件内。

这里有违规的功能

function RootNavigator() {
  const { authStore } = useStores();
  console.log('STACK NAV')
  return (
    <NavigationContainer>
      <Stack.Navigator
        headerMode="none"
        screenoptions={{ cardStyle: { backgroundColor: 'white' } }}>
        {!authStore.authUser && (
          <Stack.Screen name="SignIn" component={SignInScreen} />
        )}
        {authStore.authUser && (
          <Stack.Screen name="Authenticated" component={AuthenticatedDrawer} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

当应用加载时,这个日志会被记录两次。

这是父商店提供者:

function StoreProvider({ children }: StoreProviderProps) {
  const [stores,setStores] = useState(createStores());
  const resetStores = useCallback(() => {
    setStores(createStores());
  },[]);
  return (
    <StoreContext.Provider value={{ ...stores,resetStores }}>
      {children}
    </StoreContext.Provider>
  );
}

这是应用程序组件,其中 RootNavigator 被包装在商店提供程序中。当我将日志放在 RootNavigator 上方时,只会发生一次。

const App = () => {
  useEffect(() => {
    SplashScreen.hide();
  },[]);
  return (
    <StoreProvider>
      <RootNavigator />
    </StoreProvider>
  );
};

我很欣赏这些是一小段代码,但它们应该描述根导航器的包装方式,我希望足够详细。

感谢您的帮助!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。