如何解决根据用户登录状态路由到新组件
我刚刚开始使用 React Native,我在思考框架的构建方式时遇到了一些麻烦。
我的入口点是 App.js,我希望 App.js 只检查用户是否已登录/使用 firebase 进行身份验证。在 android 上使用 firebase,一旦用户通过身份验证,他们的状态就会保存在 firebase auth 对象中,直到他们手动注销。我希望在 RN 中使用相同的系统。 所以我希望 App.js 只检查用户是否通过身份验证,如果是,将他发送到主屏幕(主屏幕组件),或者如果不发送他登录(登录组件)。
我还编写了一个函数来检查用户是否通过身份验证并适当地路由他们。 我也单独构建了导航容器,但我不知道如何将它们链接在一起。
App.js:
import React from 'react';
import { StyleSheet,Text,View,Image,Button} from 'react-native';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import auth,{ firebase } from "@react-native-firebase/auth"
const Stack = createStackNavigator();
function isTheUserAuthenticated({navigation})
{
let user = firebase.auth().currentUser.uid;
if (user)
{
navigation.navigate('Home')
}
else
{
navigation.navigate('Login')
}
}
function App()
{
isTheUserAuthenticated();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,},titleText: {
fontSize: 20,fontWeight: "bold"
},horizontalContainer: {
flexDirection: "row",});
export default App;
HomeScreen.js:
import React from 'react';
import { StyleSheet,{ firebase } from "@react-native-firebase/auth"
function HomeScreen()
{
return (
<View style= { [ styles.container,{flexDirection: "column"} ] }>
<View style={ [ styles.horizontalContainer,{flex: 2} ] }>
<Image source={require('./imgs/usdt_logo.png')} />
<Text style={styles.titleText}>USDT</Text>
</View>
<View style={{ flex: 2,backgroundColor: "orange" }} >
</View>
<View style={{ flex: 2,backgroundColor: "blue" }} >
</View>
<View style={{ flex: 1,backgroundColor: "white" }} >
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,titleText: {
fontSize: 20,fontWeight: "bold"
},horizontalContainer: {
flexDirection: "row",});
export default HomeScreen;
LoginScreen.js:
import React from 'react';
import { StyleSheet,{ firebase } from "@react-native-firebase/auth"
function LoginScreen()
{
return (
<View style= { [ styles.container,{flexDirection: "column"} ] }>
<Text style={styles.titleText}>FUKU</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,});
export default LoginScreen;
此外,我的 HomeScreen.js 和 LoginScreen.js 文件位于名为“pages”的子文件夹中
我应该在哪里调用我的 isTheUserAuthenticated 并且该函数是否编写正确?
解决方法
我通常做的是总是先加载登录屏幕,然后检查是否经过身份验证,navigate.navigate('Home') 或反之亦然。
另外你可以使用
<Stack.Navigator
initialRouteName = isAuthenticated ? "Home" : "Login"
>
....
</Stack.Navigator>
您可以同时使用两者,具体取决于您保存登录状态的方式。
您的 isAuthenticated 函数是否正确编写?答案是否。对于 Firebase 身份验证,您需要观看 onauthstatechange。
有一个示例 here 展示了您应该如何创建提供者/内容以保存您的身份验证状态
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。