根据用户登录状态路由到新组件

Question

我刚刚开始使用 React Native，但我在思考框架的构建方式时遇到了一些麻烦。

我的入口点是 App.js，我希望 App.js 只检查用户是否已通过 firebase 登录/验证。在 android 上使用 firebase，一旦用户通过身份验证，他们的状态就会保存在 firebase auth 对象中，直到他们手动注销。我希望在 RN 中使用相同的系统。所以我希望 App.js 只检查用户是否已通过身份验证，如果是，则将他发送到主屏幕（主屏幕组件），如果没有，则将他发送到登录（登录组件）。

我还编写了一个函数来检查用户是否经过身份验证并适当地路由他们。我也单独构建了导航容器，但我不知道如何 link 它们在一起。

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;

LoginScreen.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 文件位于名为“pages”的子文件夹中

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

Answer 1

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

此外你还可以使用

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

您可以同时使用两者，具体取决于您保存登录状态的方式。

你的isAuthenticated函数写对了吗？答案是否。对于 firebase 身份验证，您需要观看 onauthstatechange.

有一个示例 here 展示了您应该如何创建一个 Provider/Content 来保存您的授权状态

根据用户登录状态路由到新组件

Routing to a new Component based on user login status

react-native

react-native-navigation

react-native-firebase