问题描述
这是我们的 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 (将#修改为@)