未处理的拒绝（TypeError）：无法读取本机未定义的 属性 '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>
        )
    }
}

希望这个问题能尽快解决.. 谢谢。

Answer 1

这个问题是由于您没有在 Stack 导航器中添加 Splash 组件，或者如果您没有添加调用的地方，我们假设 <Splash /> 您忘记将导航作为 props 传递。

我建议在 Stack Navigator 中添加 Splash 或执行 <Splash navigation={this.props.navigation} />

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