React 导航不显示登录屏幕（流程）

Question

我只是尝试使用 SecureStore 检索令牌，然后将用户引导到正确的屏幕。

这里是“App.js”：

import * as React from 'react';
import { Pressable } from 'react-native';
import style from './Style';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons, AntDesign, MaterialCommunityIcons } from '@expo/vector-icons';
import HomeScreen from './components/HomeScreen.jsx';
import SigninScreen from './components/SigninScreen.jsx';
import ProfilScreen from './components/ProfilScreen.jsx';
import FormScreen from './components/FormScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import LogoTitle from './components/utils/LogoTitle.jsx';
import * as SplashScreen from 'expo-splash-screen';
import * as SecureStore from 'expo-secure-store';
import { save, getValueFor, deleteValueFor } from './js/secureStore';

SplashScreen.preventAutoHideAsync();

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function BottomTabs({ navigation }) {
  return (
    <Tab.Navigator screenOptions={{ tabBarShowLabel: false }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () => (
            <Ionicons name="home" color="black" size={28} />
          ),
          headerTitle: (props) => <LogoTitle {...props} title={"FestiZ"} size={35} />,
          headerRight: () => (
            <Pressable onPress={() => navigation.navigate('Login')}>
              <MaterialCommunityIcons name="face-man-profile" size={24} color="black" style={style.iconProfil} />
            </Pressable>

          ),
        }}
      />
      <Tab.Screen
        name="Form"
        component={FormScreen}
        options={{
          headerTitle: (props) => <LogoTitle {...props} title={"Party"} size={35} />,
          tabBarIcon: () => (
            <AntDesign name="pluscircleo" color="black" size={34} />
          ),
        }}
      />
      <Tab.Screen
        name="Party"
        component={SigninScreen}
        options={{
          headerTitle: (props) => <LogoTitle {...props} title={"Profil"} size={35} />,
          tabBarIcon: () => (
            <MaterialCommunityIcons name="party-popper" size={28} color="black" />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function HomePack() {
  return (
    <Stack.Navigator options={{ headerShown: false }}>
      <Stack.Screen name="Tabs" component={BottomTabs} options={{ headerShown: false }} />
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
            name="Profil"
            component={ProfilScreen}
            options={{
              headerTitle: (props) => <LogoTitle {...props} title={"Profil"} size={25} />,
            }}
          />
    </Stack.Navigator>
  );
}

function App() {
  const [token, onChangeToken] = React.useState(null);
  // save('userToken', 'hiudekzn6764huidb');

  React.useEffect(() => {
    const getTokenAsync = async () => {
      try {
        await SecureStore.getItemAsync('userToken').then((data) => {
          onChangeToken(data);
        });
      } catch (e) {
        console.log(e);
      }
    };

    getTokenAsync();
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {token == null ? (
          <Stack.Screen name="Login" component={LoginScreen} />
        ) : (
          <Stack.Screen name="HomePack" component={HomePack} options={{ headerShown: false }} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这是“secureStore.js”：

import * as SecureStore from 'expo-secure-store';

export async function save(key, value) {
    await SecureStore.setItemAsync(key, value);
};

export async function getValueFor(key) {
    let result = await SecureStore.getItemAsync(key);
    if (result) {
        return result;
    }              
};

export async function deleteValueFor(key) {
    await SecureStore.deleteItemAsync(key);
};

如果 'token' == null，则显示此屏幕：

另一方面，如果我在“token”变量中输入一个值，则会直接显示登录屏幕。此时如果我登录，令牌将被设置并且主屏幕将正确显示。

您知道问题的原因吗？

Answer 1

我不知道这是否是原因，但我发现您没有告诉启动画面显式隐藏SplashScreen.hideAsync()。 如果这就是原因，我认为您应该在 SecureStore 的响应解析为显示登录页面时隐藏它。