[英]Login using react-native and firebase-firestore and when we open the app, how to redirect to home page if already logged in?
我正在看一个训练视频。 在视频中,他正在使用 firebase 进行登录过程。 同时,如果用户登录,应用程序会将用户重定向到另一个页面。我做了必须做的事情,但是当我单击登录按钮时,出现了一个白屏。 你能告诉我哪里出错了吗?
HomeStack.js
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'
import HomeScreen from '../screens/Home/HomeScreen'
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const BottomTab = () => {
return (
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen
name='HomeScreen'
component={HomeScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
}
const HomeStack = () => {
return (
<Stack.Navigator initialRouteName="BottomTab">
<Stack.Screen
name="BottomTab"
component={BottomTab}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
)
}
export default HomeStack
AuthStack.js
import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ResetPasswordScreen from '../screens/Auth/ResetPasswordScreen'
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const BottomTabStack = () => {
return (
<Stack.Navigator initialRouteName="LoginScreen">
<Stack.Screen
name='LoginScreen'
component={LoginScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='SignUpScreen'
component={SignUpScreen}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name='ResetPasswordScreen'
component={ResetPasswordScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
)
}
const AuthStack = () => {
return (
<Stack.Navigator initialRouteName="BottomTabStack">
<Stack.Screen
name="BottomTabStack"
component={BottomTabStack}
options={{
headerShown: false
}}
/>
</Stack.Navigator>
)
}
export default AuthStack
和 LoginScreen.js
import { View, Text, SafeAreaView, TouchableOpacity, ScrollView, TextInput, Button } from 'react-native'
import React, { useContext } from 'react'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import { AuthContext } from '../../navigation/AuthProvider'
import { Formik, validateYupSchema } from 'formik'
import * as yup from 'yup'
const color = '#aaa';
const LoginScreen = ({ navigation }) => {
const { login } = useContext(AuthContext);
const loginValidationSchema = yup.object().shape({
email: yup
.string()
.required("Boş Geçilemez")
.email("Geçerli bir email giriniz!"),
password: yup
.string()
.required("Boş Geçilemez")
.min(6, ({ min }) => 'Şifre en az' + min + 'karakterden olmalıdır')
});
return (
<SafeAreaView style={{ width: '100%', height: '100%' }}>
<View style={{
width: '100%',
height: '90%',
alignItems: 'center',
justifyContent: 'center'
}}>
<View style={{
width: '75%',
alignItems: 'center',
padding: 10,
backgroundColor: '#ddd',
borderRadius: 30
}}>
<Text style={{fontSize:24,color:'#000'}}>Üye Girişi</Text>
<Formik
validationSchema={loginValidationSchema}
initialValues={{ email: '', password: '' }}
onSubmit={values => login(values.email, values.password)}>
{({ handleChange, handleBlur, handleSubmit, values, errors, isValid,
}) => (
<>
<TextInput
name="email"
placeholder='Email Adresiniz'
style={{
height: 50,
width: '90%',
margin: 10,
borderColor: '#000',
borderWidth: 1,
borderRadius: 10,
padding: 10,
fontSize: 16
}}
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
keyboardType="email-address"
/>
{errors.email && <Text style={{ color: '#f00', fontSize: 14 }}>{errors.email}</Text>}
<TextInput
name="password"
placeholder='Şifreniz'
style={{
height: 50,
width: '90%',
margin: 10,
borderColor: '#000',
borderWidth: 1,
borderRadius: 10,
padding: 10,
fontSize: 16
}}
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
value={values.password}
keyboardType="visible-password"
secureTextEntry
/>
{errors.password && (<Text style={{ color: '#f00', fontSize: 14 }}>{errors.password}</Text>)}
<View style={{ width: '60%' }}>
<Button style={{margin:10}}
color='#d55'
onPress={handleSubmit}
disabled={!isValid}
title="Giriş" />
</View>
</>
)}
</Formik>
</View>
</View>
<View style={{
backgroundColor: '#fff',
width: '100%',
height: 75,
bottom: 0,
position: 'absolute',
flexDirection: 'row'
}}>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("LoginScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='user-shield' color={'#d55'} size={30} />
<Text style={{ fontSize: 20, color: '#d55' }}>Giriş Yap</Text>
</View></TouchableOpacity>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("SignUpScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='user-plus' color={color} size={30} />
<Text style={{ fontSize: 20, color: color }}>Kayıt OL</Text>
</View></TouchableOpacity>
<TouchableOpacity style={{
flex: 1,
}} onPress={() => {
navigation.navigate("ResetPasswordScreen")
}}>
<View style={{
backgroundColor: '#fff',
flex: 1,
height: 75,
bottom: 0,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}>
<IconFA5 name='key' color={color} size={30} />
<Text style={{ fontSize: 20, color: color }}>Şifre Değiştir</Text>
</View></TouchableOpacity>
</View>
</SafeAreaView>
)
}
export default LoginScreen
您可以查看有关身份验证流程的这篇文章。 https://reactnavigation.org/docs/auth-flow/
基本上它是关于条件渲染的。 您应该存储有关 isLogin 的状态(异步存储等)
return (
<NavigationContainer>
<Stack.Navigator>
isLogin ? (
<>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
<Stack.Screen name="SignUp" component={SignUpScreen} />
</>
);
</Stack.Navigator>
</NavigationContainer>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.