reactjs 有条件地将用户重定向到特定屏幕

toiithl6  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(108)

如果用户尚未填写其个人资料,我希望将正在登录我的应用的用户重定向到“个人资料”屏幕。但如果他们已经填写了个人资料,我希望将他们重定向到“欢迎”屏幕。

import { StyleSheet, View,Text, Pressable ,ScrollView, TextInput, Image,TouchableWithoutFeedback} from 'react-native'
import {  getDoc, doc, } from "firebase/firestore"; 
import { db , users} from "../firebase"
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React, { useState, useEffect } from "react";
import { UserAuth } from "../contest";

const SignIn = ({navigation}) => {

  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const {signIn} = UserAuth();
  const { user, logout} = UserAuth();
  const [isLoading, setIsLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(true);

  const handleSubmit = async (e) => {
     e.preventDefault()
     setError(null)
    
     
     try {
      setIsLoading(true);
         await signIn(email, password)

}
 
        // navigation.navigate("Welcome");
         
      catch (e) {
         setError(e.message) 
         
         console.log(e.message)
         setIsLoading(false);

     }

 }

const runner = async () =>{  
 
   const docRef = doc(db, "users",user.email || user.phoneNumber);
 const docSnap = await getDoc(docRef);
 
 if (docSnap.exists()) {
   console.log("Document data:", docSnap.data());
   navigation.navigate("Welcomed");
 } else {
   // doc.data() will be undefined in this case
   console.log("No such document!");
   navigation.navigate("profile");
 }

  
}

 useEffect(() => {
 runner() 
     
   }, [user])

我使用firebase对用户进行身份验证,将用户的配置文件保存在firstore中,然后在firestore中检查用户的配置文件,如果用户没有配置文件,我的代码将直接重定向到配置文件屏幕,如果用户有配置文件,则重定向到欢迎屏幕

sy5wg1nm

sy5wg1nm1#

要有条件地将用户重定向到React Native中的特定屏幕,可以使用React Navigation库提供的useEffect钩子和导航对象。
下面是一个示例代码片段,演示了如何根据某些条件有条件地将用户重定向到特定屏幕:

import React, { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

const MyScreen = ({ someCondition }) => {
  const navigation = useNavigation();

  useEffect(() => {
    if (someCondition) {
      navigation.navigate('MyOtherScreen');
    }
  }, [someCondition]);

  return (
    // Your screen content goes here
  );
};

在本例中,我们使用useNavigation挂钩访问React Navigation提供的导航对象。然后,当someCondition属性更改时,我们使用useEffect挂钩有条件地导航到不同的屏幕。如果someCondition属性为true,我们调用导航对象上的navigate方法,并将要导航到的屏幕的名称作为参数传递。
通过更改要导航到的屏幕的名称和要检查的条件,可以自定义此代码段以适应特定的用例。

相关问题