嗨,我正在尝试在用户登录时添加选项卡导航,并在用户未登录时添加堆栈导航。所以我写了一个逻辑,但我不知道为什么会出错。请帮帮我。
我只想在用户成功登录时显示选项卡导航我使用 Nodejs 后端和 Mongodb 作为数据库。
这是我的 AppNavigator 文件。
应用导航器.js
import React, { useEffect, useState } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import SignUp from "../screens/SignupScreen";
import LoginScreen from "../screens/LoginScreen";
import LoadingScreen from "../screens/LoadingScreen";
import HomeScreen from "../screens/HomeScreen";
import AsyncStorage from '@react-native-async-storage/async-storage';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator()
const [isLoggedin, setLogged] = useState(null)
const TabNavigator = () => {
return <TabNavigator>
<Tab.Screen name='Home' component={HomeScreen} />
<Tab.Screen name='Profile' component={AccountScreen} />
<Tab.Screen name='Home' component={HomeScreen} />
</TabNavigator>
}
const AuthNavigator = () => {
return (
<Stack.Navigator
headerMode="none"
screenOptions={{
headerStyle: { elevation: 0 },
cardStyle: { backgroundColor: '#fff' }
}}
>
<Stack.Screen name="loading" component={LoadingScreen}></Stack.Screen>
<Stack.Screen name="home" component={HomeScreen}></Stack.Screen>
<Stack.Screen name="login" component={LoginScreen}></Stack.Screen>
<Stack.Screen name="signup" component={SignUp}></Stack.Screen>
</Stack.Navigator>
)
};
const Navigation = () => {
const [user, setUser] = useState('');
useEffect(() => {
if (isLoggedin) {
setUser(userExist)
}
else {
setUser('')
}
}, [])
return (
<NavigationContainer >
{user ? <TabNavigator /> : <AuthNavigator />}
</NavigationContainer>
)
};
function AppNavigator() {
useEffect(() => {
const token = AsyncStorage.getItem('token')
if (token) {
setLogged(true)
}
else {
setLogged(false)
}
}, [])
return (
<Navigation />
);
}
export default AppNavigator;
这是我的 App.js 文件
应用程序.js
import React,{useEffect,useState} from "react";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";
export default function App() {
return (
<AppNavigator />
);
}
我有自己的 LoadingScreen 文件
加载屏幕.js
import { StatusBar } from 'expo-status-bar';
import React,{useEffect,useState} from 'react';
import { StyleSheet, ActivityIndicator, Image,View,Text } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Button, TextInput } from 'react-native-paper';
// <View style={styles.container}>
export default function LoadingScreen(props) {
const detectLogin = () =>{
const token = AsyncStorage.getItem('token')
if (token) {
props.navigation.navigate("profile")
}
else {
props.navigation.navigate("login")
}
}
useEffect(() => {
detectLogin()
}, [])
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="black">
</ActivityIndicator>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});