时间戳

首页 > 解决方案 > React-native-splashscreen 和导航

react-native - React-native-splashscreen 和导航

问题描述

我想使用 react-native 启动画面创建一个没有白屏问题的启动画面，然后我想检查导航。假设我有 3 个屏幕启动画面、登录和主页。如果用户已登录，我想从启动屏幕导航到主屏幕，否则我想从启动屏幕导航到登录页面。我如何使用 react-native-splash-screen 和 react-navigation 来实现这一点。

应用程序.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-nativereact-native-androidreact-navigationreact-native-iosreact-navigation-stack

解决方案

你可以做这样的事情，在它的componentDidMount cehck fro user exits via asyncstorage etc，然后相应地导航

 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');
}

        }
    }

希望能帮助到你。随时怀疑

推荐阅读