React-native-splashscreen and navigation

问题描述 投票:0回答:1

我想使用react-native初始画面创建没有白屏问题的初始画面,然后我要检查导航。假设我有3个屏幕Splash,Login和Home。如果用户已登录,我想从“启动”屏幕导航到“主页”屏幕,否则我想从“启动”屏幕导航到“登录”页面。如何使用react-native-splash-screen和react-navigation实现此功能。

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;
react-native react-native-android react-navigation react-native-ios react-navigation-stack
1个回答
0
投票
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'); } } }

希望有帮助。如有疑问,请随时

© www.soinside.com 2019 - 2024. All rights reserved.