Firebase 反应自然。如何根据用户身份验证状态显示屏幕

我正在开发我的第一款React原生应用程序。我已经创建了登录/注册屏幕，并将其与Firebase连接以进行身份验证。我还有一些屏幕，里面有抽屉如果用户未通过身份验证，我希望这样做。登录/注册屏幕应显示，否则主屏幕（有多个抽屉）将显示。为此，我在MainRouteComponent中进行了一些检查，但它不工作

我正在上传所有相关组件的代码以及我在这里使用的一些redux代码。我知道这将需要时间来通过这么多的代码，但我尝试了很多，我现在挣扎。希望你们中的许多人能帮忙。：）

这是我的密码：-

App.js

从“React”导入React；
从“/components/MainComponent”导入主组件；
从“/components/MainRouteComponent”导入MainRoute
从'react redux'导入{Provider}；
从“./redux/ConfigureStore”导入{ConfigureStore}；
从'redux persist/es/integration/react'导入{PersistGate}
从“./components/LoadingComponent”导入{Loading}；
const{persistor，store}=ConfigureStore（）；
导出默认应用=（）=>{
返回(
);
}

MainRouteComponent.js

import React，{useState}来自“React”；
从“/mainpomponent”导入Main；
从“./RootComponent”导入根目录；
从“../firebase/firebase”导入{auth}；
const AuthContext=React.createContext（）；
常量主路由=（）=>{
const user=auth.currentUser
console.log（“用户”，用户）
log（“Auth”，isAuth）
返回(
{（用户==null）？
:
} 
)
}
导出默认主路由；

RootComponent.js

import React，{Component}来自'React'；
从“反应导航”导入{createStackNavigator}；
从“react native Animatable”导入*作为可设置动画；
从“./SplashScreen”导入SplashScreen；
从“./LoginComponent”导入登录名；
从“./RegistrationComponent”导入寄存器；
const RootStack=createStackNavigator({
SplashScreen:{screen:SplashScreen，
导航选项：（{navigation}）=>({
头型：{
背景颜色：“512DA8”
},
标题：“欢迎美食家”，
标题颜色：“#fff”，
头饰样式：{
颜色：“fff”，
对齐项目：“中心”
}          
})  
},
登录组件：{
屏幕：登录，
导航选项：（{navigation}）=>({
头型：{
背景颜色：“512DA8”
},
标题：“登录”，
标题颜色：“#fff”，
头饰样式：{
颜色：“fff”，
对齐项目：“中心”
}          
})  
},
寄存器：{
屏幕：寄存器，
导航选项：（{navigation}）=>({
头型：{
背景颜色：“512DA8”
},
标题：“注册”，
标题颜色：“#fff”，
头饰样式：{
颜色：“fff”，
对齐项目：“中心”
}          
})  
},
},
{
initialRouteName:“SplashScreen”，
导航选项：（{navigation}）=>({
头型：{
背景颜色：“512DA8”
},
标题颜色：“#fff”，
头饰样式：{
颜色：“fff”
}
})
}
);
类根扩展组件{
render（）{
返回(
)
}
}
导出默认根目录；

LoginComponent.js

import React，{Component}来自'React'；
从“react native”导入{视图、样式表、文本、滚动视图、图像}；
从“react native elements”导入{Input，CheckBox，Button，Icon}；
从“世博安全商店”导入*作为安全商店；
从“../redux/ActionCreators”导入{loginUser}；
从'react redux'导入{connect}；
常量mapStateToProps=状态=>{
返回{
auth:state.auth
}
}
const mapDispatchToProps=调度=>{
返回{
登录用户：（creds）=>调度（登录用户（creds））
}
}
类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”，
记住：错
}
}
componentDidMount（）{
SecureStore.getItemAsync（'userinfo'）
.然后（（用户数据）=>{
让userinfo=JSON.parse（userdata）；
如果（用户信息）{
this.setState（{email:userinfo.email}）；
this.setState（{password:userinfo.password}）；
this.setState（{记住：true}）
}
})
}
静态导航选项={
标题：“登录”，
tabBarIcon:（{tintColor}）=>(
) 
};
handleLogin（）{
this.props.logiuser（{email:this.state.email，密码：this.state.password}）；
//event.preventDefault（）；
如果（这个。状态。记住）
SecureStore.setItemAsync（'userinfo'，JSON.stringify（{email:this.state.email，密码：this.state.password}））
.catch（（错误）=>console.log（'无法保存用户信息'，错误））；
其他的
SecureStore.deleteItemAsync（'userinfo'）
.catch（（错误）=>console.log（'无法删除用户信息'，错误））；
这是我的国家({
电子邮件：“”，
密码：“”，
记住：错
})
this.props.navigation.navigate（'Home'））
}
render（）{
const{navigate}=this.props.navigation；
返回(