React native-身份验证流上的堆栈屏幕漏洞

Question

React本机登录堆栈在打开应用程序时闪烁，然后显示主页。使用react本机导航V5。将令牌从服务器添加到异步存储，然后在打开应用程序时，我在异步存储中检查令牌，如果它不为空，我将导航到我的AppScreens，否则留在AuthScreens中

AppNavigator

import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {createStackNavigator} from '@react-navigation/stack';
import AsyncStorage from '@react-native-community/async-storage';
import AddUserData from '../lib/UserDetailsHelper';
//Import screens
import Login from '../Login';
import AddReferalCode from '../AddReferalCode';
import AddUserDetails from '../AddUserDetails';
import DrawerNavigator from './DrawerNavigator';
import BuyCoins from '../BuyCoins';
import PriceList from '../PriceList';
//Quick Play
import QuickPlayGameList from '../QuickPlay/GameList';
import QuickplayRoom from '../QuickPlay/RoomCreationScreen';
import QuickPlayWaitingRoom from '../QuickPlay/waitingRoom';
import QuickPlayQuestions from '../QuickPlay/Questions';
import QuickPlayResult from '../QuickPlay/Result';
import RNBootSplash from 'react-native-bootsplash';
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
const AppStack = createStackNavigator();
const AuthScreens = (props) => (
<AuthStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>
{/* Common */}
<Stack.Screen {...props} name="Login" component={Login} />
<Stack.Screen name="AddReferalCode" component={AddReferalCode} />
<Stack.Screen name="Add User Details" component={AddUserDetails} />
</AuthStack.Navigator>
);
const AppScreens = () => (
<AppStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>
<Stack.Screen name="Drawer" component={DrawerNavigator} />
<Stack.Screen name="BuyCoins" component={BuyCoins} />
<Stack.Screen name="PriceList" component={PriceList} />
{/* <Stack.Screen name="Home" component={Home} /> */}
{/* QuickPlay */}
<Stack.Screen name="QuickPlayGameList" component={QuickPlayGameList} />
<Stack.Screen name="QuickplayRoom" component={QuickplayRoom} />
<Stack.Screen
name="QuickPlayWaitingRoom"
component={QuickPlayWaitingRoom}
/>
<Stack.Screen name="QPQuestions" component={QuickPlayQuestions} />
<Stack.Screen name="QPResult" component={QuickPlayResult} />
</AppStack.Navigator>
);
Routes = (props) => {
const [token, setToken] = useState(null);
console.log('Props acc token:' + props.accessToken);
useEffect(() => {
getToken()
.then((token) => {
setToken(token);
})
.finally(async () => {
await RNBootSplash.hide({fade: true});
});
}, []);
const getToken = async () => {
try {
const token = await AsyncStorage.getItem('AccessToken');
const rating = await AsyncStorage.getItem('UserRating');
console.log('first token:' + token);
setToken(token);
AddUserData.addAccessToken(token);
AddUserData.addUserRating(rating);
return token;
} catch (e) {
console.log(e);
}
};
return token ? <AppScreens /> : <AuthScreens />;
};
const mapStateToProps = (state) => {
return {
accessToken: state.userDetails.accessToken,
};
};
export default connect(mapStateToProps, null)(Routes);

打开应用程序时，AuthScreen堆栈闪烁。

问题的屏幕记录

https://drive.google.com/file/d/12p2NtxUbfS-eFt5iGM0PAvhuJZJhUyJQ/view?usp=sharing

Answer 1

请尝试将主屏幕放在登录屏幕之前，并查看效果

<AuthStack.Navigator
screenOptions={{
headerShown: false,
headerTransparent: true,
headerTitle: false,
}}>

//      >>>  PUT HOME SCREEN HERE

{/* Common */}
<Stack.Screen {...props} name="Login" component={Login} />
<Stack.Screen name="AddReferalCode" component={AddReferalCode} />
<Stack.Screen name="Add User Details" component={AddUserDetails} />
</AuthStack.Navigator>

附加信息：(感谢Thorin的发现(

Try to add a Splash screen to the project, and add a small time out of say 10ms, it may be able to fix the problem.