未处理拒绝（TypeError）：无法读取react-native中未定义的属性'dispatch'

Question

我在运行react-native应用程序时遇到问题。问题在Splash.js页面上。我想在2500秒后移至Login2.js页面但是，在Splash.js页面出现后，会出现错误：

未处理的拒绝（类型错误）：无法读取未定义的属性'dispatch'>]

有人可以帮助我克服这个问题吗？这是脚本

Splash.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>
        )
    }
}
希望这个问题能尽快解决..谢谢。

我在运行react-native应用程序时遇到问题。问题在Splash.js页面上。我想在2500s后移至Login2.js页面，但是，在Splash.js页面出现后，出现错误：Unhandled ...

Answer 1

此问题是由于您没有在堆栈导航器中添加Splash组件，或者如果您没有添加然后调用的地方，那么让我们假设<Splash />忘记了通过导航作为道具。