基于用户登录状态路由到新组件

Question

我刚开始使用React Native，我很难理解框架是如何构建的。

我的入口点是App.js，我希望App.js只检查用户是否使用firebase登录/验证。在android上使用firebase，一旦用户通过身份验证，他们的状态就会保存在firebase auth对象中，直到他们手动注销。我希望在注册护士中使用相同的系统。因此，我希望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, 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"

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;

登录屏幕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"

function LoginScreen() 
{
return (
<View style= { [ styles.container, {flexDirection: "column"} ] }>
<Text style={styles.titleText}>FUKU</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
titleText: {
fontSize: 20,
fontWeight: "bold"
},
horizontalContainer: {
flexDirection: "row",
},
});

export default LoginScreen;

此外，我的HomeScreen.js和LoginScreen.js文件位于名为"的子文件夹中；页面"；

我应该在哪里调用我的isTheUserAuthenticated？该函数是否正确编写？

Answer 1

我通常会先加载登录屏幕，然后检查是否已通过身份验证、导航、导航('Home'(或反之亦然。

此外，你可以使用

<Stack.Navigator
initialRouteName = isAuthenticated ? "Home" : "Login"
>
....
</Stack.Navigator>

根据保存登录状态的方式，可以同时使用这两种方法。

您的isAuthenticated函数是否正确编写？答案是否。对于firebase auth，您需要观察onauthstatechange。

这里有一个例子显示了您应该如何创建一个提供者/内容，以保存您的身份验证状态