React Native，从启动画面重定向到另一个屏幕

Question

我尝试在 5 秒后从 SplashScreen 导航到另一个屏幕，但出现此错误：

来自 SplashScreen 的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Alert, ImageBackground,Image,AsyncStorage,ActivityIndicator} from 'react-native';
import { StackNavigator } from 'react-navigation';
 

export default class App extends Component<Props> {
 
componentDidMount () {
    setTimeout(() => {
    //  this._retrieveData();
     this.props.navigation.replace("Journeys");
    
    }, 5000)
  }
 
 
render() {

    return (
        <ImageBackground 
            source={require('../../assets/rsz_blue_bg.png')} 
            style = {{flex: 1, height: '100%', width: '100%', resizeMode : 'stretch'}}>

        <Image 
            source={require('../../assets/logo_white.png')}
            style = {{ width: '100%', height:'70%', marginTop: 100 }}
        />
        </ImageBackground>
        );
        
        
    }   
}

来自 App.js 的代码：

import React, { useContext, useEffect } from 'react'; 
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Icon from 'react-native-vector-icons/Ionicons';

//我在这里进行导入，但我正在削减代码以便能够发布:)

const AuthStack = createStackNavigator()

const AuthStackScreen = () => (
  <AuthStack.Navigator screenOptions={{headerShown: false}}>
    <AuthStack.Screen name="SignIn" component={SignInScreen} />
    <AuthStack.Screen name="SignUp" component={SignUpScreen} />
  </AuthStack.Navigator>
)

const FirstStack = createStackNavigator()

const FirstStackScreen = ({navigation}) => (
  <FirstStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#009387'
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
      // alignSelf: 'center',
    }
  }}>
  
    <FirstStack.Screen 
      name="Journeys" 
      component={TrackCreateScreen}
      options={{
        headerLeft: () => (
          <Icon.Button 
          name="ios-menu" 
          size={25} 
          backgroundColor="#009387"
          onPress={() => {navigation.openDrawer()}}></Icon.Button>
        )
      }} 
      />
  </FirstStack.Navigator>
)

const TrackListStack = createStackNavigator()

const TrackListScreens = ({navigation}) => (
  <TrackListStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#009387'
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }}>
    <TrackListStack.Screen 
    name="History" 
    component={TrackListScreen} 
    options={{
      headerLeft: () => (
        <Icon.Button 
        name="ios-menu" 
        size={25} 
        backgroundColor="#009387"
        onPress={() => {navigation.openDrawer()}}></Icon.Button>
      )
    }} 
    />
    <TrackListStack.Screen name="Journey Details" component={TrackDetailScreen} />
  </TrackListStack.Navigator>
)

const AccountStack = createStackNavigator()

const AccountScreens = ({navigation}) => (
  <AccountStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#009387'
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }}>
    <AccountStack.Screen
    name="Account" 
    component={AccountScreen} 
    options={{
      headerLeft: () => (
        <Icon.Button 
        name="ios-menu" 
        size={25} 
        backgroundColor="#009387"
        onPress={() => {navigation.openDrawer()}}></Icon.Button>
      )
    }} 
    />

  </AccountStack.Navigator>
)


const AppStack = createDrawerNavigator()

const AppStackScreen = ({navigation}) => (
  <AppStack.Navigator drawerContent={props => <DrawerContent {...props}/>}>
    <AppStack.Screen name="Journey" component={FirstStackScreen} />
    <AppStack.Screen name="History" component={TrackListScreens} />
    <AppStack.Screen name="Account" component={AccountScreens} />
  </AppStack.Navigator>
)


const App = () => {
  const { state } = useContext(AuthContext)

  if(state.isLoading) {
    return <LoadingScreen />
  }

  return (
    <NavigationContainer>
          <SplashScreen/>
    </NavigationContainer>
  )
}

export default () => (
  <AuthProvider>
    <LocationProvider>
      <TrackProvider>
        <App />
      </TrackProvider>
    </LocationProvider>
  </AuthProvider>
)

或者，如果您有更好的选择来执行此重定向，那也没关系。 我尝试了各种方法，确定我做错了什么。

请帮忙。

Answer 1

this 在 setTimeout 中无法访问。

componentDidMount () {
    let self = this;
    setTimeout(() => {
    //  this._retrieveData();
     self.props.navigation.replace("Journeys");
    
    }, 5000)
  }