React原生splashscreen和导航

Question

我想使用react原生启动屏幕创建一个没有白屏问题的启动屏幕，之后我想检查导航。假设我有三个屏幕的飞溅，登录和主页。如果用户登录，我想从启动屏幕导航到主屏幕，否则我想从开始屏幕导航到登录页面。如何使用react原生启动屏幕和react导航来实现这一点。

App.js

import React from 'react';
import {ActivityIndicator} from 'react-native';
import {Provider} from 'react-redux';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {PersistGate} from 'redux-persist/es/integration/react';
import Navigator from './app/navigation/NavigationStack';
import configureStore from './app/store/configureStore';
const {persistor, store} = configureStore();
export default function App() {
return (
<SafeAreaProvider>
<Provider store={store}>
<PersistGate loading={<ActivityIndicator />} persistor={persistor}>
<Navigator></Navigator>
</PersistGate>
</Provider>
</SafeAreaProvider>
);
}

NavigationStack.js

function MyStack() {
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen
name={Strings.string_SignInScreen}
component={SignInScreen}
/>
<Stack.Screen name={Strings.string_HomeScreen} component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default MyStack;

Answer 1

您可以在其组件DidMount中通过异步存储等从用户出口执行类似操作，然后相应地导航

import SplashScreen from 'react-native-splash-screen'
export default class WelcomePage extends Component {
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
if(userExists){
SplashScreen.hide();
this.props.navigation.navigate('Homescreen');
} else {
this.props.navigation.navigate('LoginScreen');
}
}
}

希望能有所帮助。无需怀疑