React-native-splashscreen 和导航

Posted 2023-05-07

【中文标题】React-native-splashscreen 和导航

【英文标题】：React-native-splashscreen and navigation

【发布时间】：2020-07-12 21:25:51

【问题描述】：

我想使用 react-native 初始屏幕创建一个没有白屏问题的初始屏幕，然后我想检查导航。假设我有 3 个屏幕启动画面、登录和主页。如果用户已登录，我想从启动屏幕导航到主屏幕，否则我想从启动屏幕导航到登录页面。如何使用 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-splash-screen 模块。

被推荐的还是没听懂

youtube.com/watch?v=XaKqek_m2mI 他们已经解释了实现目标的正确步骤。

不，不是，请阅读问题。我需要检查一个条件

【参考方案1】：

你可以做这样的事情，在它的 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');


        
    

希望对您有所帮助。如有疑问，请随意

【讨论】：

嘿，Gourav，你能分享你的邮件 ID 吗？

WelcomePage 中的 render() return () 函数呢？

不渲染，不想渲染，有逻辑就行了

我已经添加了我的 App.js 文件和导航堆栈。请看一下