Необработанное отклонение (TypeError): невозможно прочитать свойство 'dispatch' из undefined в Reaction-native

Question

У меня проблема с запуском собственного приложения. Проблема на странице Spla sh. js. Я хочу, чтобы через 2500 с перейти на страницу Login2. js Однако после появления страницы Spla sh. js появляется сообщение об ошибке:

Необработанный отказ (ошибка типа): невозможно прочитать свойство 'dispatch' из неопределенного

Может кто-нибудь помочь мне решить эту проблему? Вот скрипт

Spla sh. js:

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity, Image, Dimensions, Animated } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Wallpaper from '../components/Wallpaper';

export default class Splash extends Component {
    constructor(props) {
        super(props)

        this.state = {
            logonyaFade: new Animated.Value(0),
            tulisanFloat: new Animated.Value(0),
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        }
        Dimensions.addEventListener('change', (e) => {
            this.setState(e.window);
        });
    }
    _start = () => {
        Animated.timing(this.state.logonyaFade, {
            toValue: 1,
            duration: 1000
        }).start();
    };
    componentWillMount() {
        console.disableYellowBox = true;
        setTimeout(async () => {
            this.props.navigation.dispatch(
                StackActions.reset(
                    {
                        index: 0,
                        actions: [
                            NavigationActions.navigate({ routeName: 'login2' }),
                        ]
                    }))
        }, 2500)
    }
    render() {
        return (
            <Wallpaper>
                <View style={[styles.bg, { width: this.state.width }]} onLayout={this._start}>
                    <Animated.View style={{ opacity: this.state.logonyaFade, width: 200, height: 200, alignSelf: 'center' }}>
                        <Image style={styles.logoasih} source={require('../images/logo.png')} />
                    </Animated.View>
                    <Animated.View style={{ opacity: this.state.logonyaFade }}>
                        <Text style={styles.textmotto}> "Bring Better Life To The World" </Text>
                    </Animated.View>
                </View>
            </Wallpaper>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#00BFFF',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    bg: {
        flexDirection: 'column',
        alignSelf: 'center',
        flex: 1,
        justifyContent: 'center'
    },

    imgsplash: {
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',

    },

    signupTextCont: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingVertical: 16,
        flexDirection: 'row'
    },

    signupText: {
        color: 'rgba(255,255,255, 0.7)',
        fontSize: 16,
        paddingVertical: 30,
        marginVertical: 30
    },

    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '500'
    },

    logoasih: {
        width: 200,
        height: 200,
        alignSelf: 'center',
    },

    textmotto: {
        fontSize: 20,
        color: '#015c6f',
        fontStyle: 'italic',
        lineHeight: 43.2,
        alignSelf: 'center',
    }
});

Это скрипт из Routes. js:

import {Router, Stack, Scene} from 'react-native-router-flux';

import Splash from './pages/Splash';
import Login2 from './pages/Login2';

export default class Routes extends Component{
    render(){
        return(
            <Router>
            <Scene key="root" hideNavBar={true} initial={true}>
                <Scene key ="splash" component={Splash} title="Splash"/>
                <Scene key ="login2" component={Login2} title="Login2"/>
            </Scene>
            </Router>
        )
    }
}

Надеюсь эта проблема может быть решена в ближайшее время .. спасибо.

Answer 1

Эта проблема возникает из-за того, что вы не добавили компонент Spla sh в навигатор стека, или если вы не добавили то место, куда вы звоните, предположим, <Splash /> вы забыли передать навигацию как реквизит.

Я бы предложил добавить Spla sh в Stack Navigator или сделать <Splash navigation={this.props.navigation} />

Надеюсь, это поможет. не стесняйтесь сомнений